Add basics section to vue pages

docs/guide/vue/basics/color.md

@@ -0,0 +1,52 @@
+<script setup>
+import { Sandpack } from 'sandpack-vue3'
+import sandpackTheme from '../../../.vitepress/theme/sandpackTheme.json'
+import buttonExampleFiles from './examples/button-example/files.ts'
+import iconColorExampleFiles from './examples/color-icon/files.ts'
+</script>
+
+# Color
+
+By default, all icons have the color value: `currentColor`. This keyword uses the element's computed text `color` value to represent the icon color.
+
+Read more about [ `currentColor` on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor_keyword).
+
+## Adjust the color using the `color` prop
+
+The color can be adjusted by passing the color prop to the element.
+
+<Sandpack
+  template="vue"
+  :theme="sandpackTheme"
+  :customSetup='{
+    dependencies: {
+      "lucide-vue-next": "latest"
+    }
+  }'
+  :files="iconColorExampleFiles"
+  :options="{
+    editorHeight: 295,
+    editorWidthPercentage: 60,
+  }"
+/>
+
+## Using parent elements text color value
+
+Because the color of lucide icons uses `currentColor`, the color of the icon depends on the computed `color` of the element, or it inherits it from its parent.
+
+For example, if a parent element's color value is `#fff` and one of the children is a lucide icon, the color of the icon will be rendered  as `#fff`. This is browser native behavior.
+
+<Sandpack
+  template="vue"
+  :theme="sandpackTheme"
+  :files="buttonExampleFiles"
+  :customSetup='{
+    dependencies: {
+      "lucide-vue-next": "latest"
+    }
+  }'
+  :options="{
+    editorHeight: 320,
+    editorWidthPercentage: 60,
+  }"
+/>

docs/guide/vue/basics/examples/absolute-stroke-width-icon/App.vue

@@ -0,0 +1,10 @@
+<script setup>
+import { RollerCoaster } from "lucide-vue-next";
+</script>
+
+<template>
+  <RollerCoaster
+    :size="96"
+    absoluteStrokeWidth
+  />
+</template>

docs/guide/vue/basics/examples/absolute-stroke-width-icon/files.ts

@@ -0,0 +1,15 @@
+import App from './App.vue?raw'
+import styles from '../styles.css?raw'
+
+const files = {
+  'src/App.vue': {
+    code: App,
+    active: true,
+  },
+  'src/styles.css': {
+    code:styles,
+    hidden: true
+  },
+}
+
+export default files

docs/guide/vue/basics/examples/button-example/App.vue

@@ -0,0 +1,10 @@
+<script setup>
+import { ThumbsUp } from "lucide-vue-next";
+</script>
+
+<template>
+  <button :style="{ color: '#fff' }">
+    <ThumbsUp />
+    Like
+  </button>
+</template>

docs/guide/vue/basics/examples/button-example/files.ts

@@ -0,0 +1,15 @@
+import App from './App.vue?raw'
+import styles from '../styles.css?raw'
+
+const files = {
+  'src/App.vue': {
+    code: App,
+    active: true,
+  },
+  'src/styles.css': {
+    code:styles,
+    hidden: true
+  },
+}
+
+export default files

docs/guide/vue/basics/examples/color-icon/App.vue

@@ -0,0 +1,8 @@
+<script setup>
+import { Smile } from "lucide-vue-next";
+</script>
+
+<template>
+  <Smile color="#3e9392" />
+</template>
+

docs/guide/vue/basics/examples/color-icon/files.ts

@@ -0,0 +1,15 @@
+import App from './App.vue?raw'
+import styles from '../styles.css?raw'
+
+const files = {
+  'src/App.vue': {
+    code: App,
+    active: true,
+  },
+  'src/styles.css': {
+    code:styles,
+    hidden: true
+  },
+}
+
+export default files

docs/guide/vue/basics/examples/size-icon-css-example/App.vue

@@ -0,0 +1,8 @@
+<script setup>
+import { Beer } from "lucide-vue-next";
+import './icon.css'
+</script>
+
+<template>
+  <Beer class="my-beer-icon" />
+</template>

docs/guide/vue/basics/examples/size-icon-css-example/files.ts

@@ -0,0 +1,20 @@
+import App from './App.vue?raw'
+import styles from '../styles.css?raw'
+import IconCss from './icon.css?raw'
+
+const files = {
+  'src/icon.css': {
+    code: IconCss,
+    readOnly: false,
+    active: true,
+  },
+  'src/App.vue': {
+    code: App,
+  },
+  'src/styles.css': {
+    code: styles,
+    hidden: true
+  },
+}
+
+export default files

docs/guide/vue/basics/examples/size-icon-css-example/icon.css

@@ -0,0 +1,5 @@
+.my-beer-icon {
+  /* Change this! */
+  width: 64px;
+  height: 64px;
+}

docs/guide/vue/basics/examples/size-icon-example/App.vue

@@ -0,0 +1,7 @@
+<script setup>
+import { Landmark } from 'lucide-vue-next'
+</script>
+
+<template>
+  <Landmark :size="64" />
+</template>

docs/guide/vue/basics/examples/size-icon-example/files.ts

@@ -0,0 +1,15 @@
+import App from './App.vue?raw'
+import styles from '../styles.css?raw'
+
+const files = {
+  'src/App.vue': {
+    code: App,
+    active: true,
+  },
+  'src/styles.css': {
+    code:styles,
+    hidden: true
+  },
+}
+
+export default files

docs/guide/vue/basics/examples/size-icon-font-example/App.vue

@@ -0,0 +1,11 @@
+<script setup>
+import { Star } from "lucide-vue-next";
+import "./icon.css";
+</script>
+
+<template>
+  <div className="text-wrapper">
+    <Star class="my-icon" />
+    <div>Yes</div>
+  </div>
+</template>

docs/guide/vue/basics/examples/size-icon-font-example/files.ts

@@ -0,0 +1,21 @@
+import App from './App.vue?raw'
+import styles from '../styles.css?raw'
+import IconCss from './icon.css?raw'
+
+const files = {
+  'src/icon.css': {
+    code: IconCss,
+    readOnly: false,
+    active: true,
+  },
+  'src/App.vue': {
+    code: App,
+  },
+  'src/styles.css': {
+    code: styles,
+    hidden: true
+  },
+
+}
+
+export default files

docs/guide/vue/basics/examples/size-icon-font-example/icon.css

@@ -0,0 +1,15 @@
+.my-icon {
+  /* Icon size will relative to font-size of .text-wrapper */
+  width: 1em;
+  height: 1em;
+}
+
+.text-wrapper {
+  /* Change this! */
+  font-size: 96px;
+
+  /* layout stuff */
+  display: flex;
+  gap: 0.25em;
+  align-items: center;
+}

docs/guide/vue/basics/examples/size-icon-tailwind-example/App.vue

@@ -0,0 +1,9 @@
+<script setup>
+import { PartyPopper } from "lucide-vue-next";
+</script>
+
+<template>
+  <div>
+    <PartyPopper class="size-24" />
+  </div>
+</template>

docs/guide/vue/basics/examples/size-icon-tailwind-example/files.ts

@@ -0,0 +1,15 @@
+import App from './App.vue?raw'
+import styles from '../styles.css?raw'
+
+const files = {
+  'src/App.vue': {
+    code: App,
+    active: true
+  },
+  'src/styles.css': {
+    code:styles,
+    hidden: true
+  },
+}
+
+export default files

docs/guide/vue/basics/examples/stroke-width-icon/App.vue

@@ -0,0 +1,7 @@
+<script setup>
+import { FolderLock } from "lucide-vue-next";
+</script>
+
+<template>
+  <FolderLock :strokeWidth="1" />
+</template>

docs/guide/vue/basics/examples/stroke-width-icon/files.ts

@@ -0,0 +1,15 @@
+import App from './App.vue?raw'
+import styles from '../styles.css?raw'
+
+const files = {
+  'src/App.vue': {
+    code: App,
+    active: true,
+  },
+  'src/styles.css': {
+    code:styles,
+    hidden: true
+  },
+}
+
+export default files

docs/guide/vue/basics/examples/styles.css

@@ -0,0 +1,50 @@
+body {
+  font-family: sans-serif;
+  -webkit-font-smoothing: auto;
+  -moz-font-smoothing: auto;
+  -moz-osx-font-smoothing: grayscale;
+  font-smoothing: auto;
+  text-rendering: optimizeLegibility;
+  font-smooth: always;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  background: #202127;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  color: #fff;
+}
+
+html,
+body {
+  height: 100%;
+  min-height: 100%;
+}
+
+button {
+  display: flex;
+  align-items: center;
+  font-size: 18px;
+  padding: 10px 20px;
+  line-height: 24px;
+  gap: 8px;
+  border-radius: 24px;
+  outline: none;
+  border: none;
+  background: #111;
+  transition: all 0.3s ease;
+}
+
+button:hover {
+  background: #F56565;
+}
+
+.app, #app {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 32px;
+}

docs/guide/vue/basics/sizing.md

@@ -0,0 +1,87 @@
+<script setup>
+import { Sandpack } from 'sandpack-vue3'
+import sandpackTheme from '../../../.vitepress/theme/sandpackTheme.json'
+import sizeIconExample from './examples/size-icon-example/files.ts'
+import sizeIconCssExample from './examples/size-icon-css-example/files.ts'
+import sizeIconFontExample from './examples/size-icon-font-example/files.ts'
+import sizeIconTailwind from './examples/size-icon-tailwind-example/files.ts'
+</script>
+
+# Sizing
+
+By default, the size of all icons is `24px` by `24px`. The size is adjustable using the `size` prop and CSS.
+
+## Adjusting the icon size using the `size` prop
+
+<Sandpack
+  template="vue"
+  :theme="sandpackTheme"
+  :files="sizeIconExample"
+  :customSetup='{
+    dependencies: {
+      "lucide-vue-next": "latest"
+    }
+  }'
+  :options="{
+    editorHeight: 300,
+    editorWidthPercentage: 60,
+  }"
+/>
+
+## Adjusting the icon size via CSS
+
+The CSS properties `width` and `height` can be used to adjust the icon size.
+
+<Sandpack
+  template="vue"
+  :theme="sandpackTheme"
+  :files="sizeIconCssExample"
+  :customSetup='{
+    dependencies: {
+      "lucide-vue-next": "latest"
+    }
+  }'
+  :options="{
+    editorHeight: 300,
+  }"
+/>
+
+### Dynamically change the icon size based on the font size
+
+It is possible to resize icons based on font size. This can be achieved using the `em` unit. See this [MDN article](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#ems) for more information on the `em` unit.
+
+<Sandpack
+  template="vue"
+  :theme="sandpackTheme"
+  :files="sizeIconFontExample"
+  :customSetup='{
+    dependencies: {
+      "lucide-vue-next": "latest"
+    }
+  }'
+  :options="{
+    editorHeight: 300,
+  }"
+/>
+
+### Resizing with Tailwind
+
+`size-*` utilities can be used to adjust the size of the icon. See the [Tailwind documentation](https://tailwindcss.com/docs/width#setting-both-width-and-height) for more information on the `size-*` utilities.
+
+<Sandpack
+  template="vue"
+  :theme="sandpackTheme"
+  :files="sizeIconTailwind"
+  :customSetup='{
+    dependencies: {
+      "lucide-vue-next": "latest"
+    }
+  }'
+  :options="{
+    externalResources: ['https://cdn.tailwindcss.com'],
+    editorHeight: 260,
+    editorWidthPercentage: 60,
+  }"
+/>
+
+<!-- Code Example -->

docs/guide/vue/basics/stroke-width.md

@@ -0,0 +1,60 @@
+<script setup>
+import { Sandpack } from 'sandpack-vue3'
+import sandpackTheme from '../../../.vitepress/theme/sandpackTheme.json'
+import strokeWidth from './examples/stroke-width-icon/files.ts'
+import absoluteStrokeWidth from './examples/absolute-stroke-width-icon/files.ts'
+</script>
+
+# Stroke width
+
+All icons are designed with SVG elements using strokes.
+These have a default stroke width of `2px`.
+
+The `strokeWidth` can be adjusted to create a different look of the icons.
+
+## Adjusting stroke width with `strokeWidth` prop
+
+
+<Sandpack
+  template="vue"
+  :theme="sandpackTheme"
+  :files="strokeWidth"
+  :customSetup='{
+    dependencies: {
+      "lucide-vue-next": "latest"
+    }
+  }'
+  :options="{
+    editorHeight: 300,
+    editorWidthPercentage: 60,
+  }"
+/>
+
+## Absolute stroke width
+
+When adjusting the `size` prop the size of the stroke width will be relative to the size of the icon, this is the default SVG behavior. The `absoluteStrokeWidth` prop is introduced to adjust this behavior to make the stroke width constant no matter the size of the icon.
+
+This means that when `absoluteStrokeWidth` is enabled and the `size` of the icons is set to `48px` the `strokeWidth` will still be `2px` on the screen.
+
+Note `2px` is the default stroke width for a Lucide icon, this can be adjusted to all sizes.
+
+![Absolute stroke width comparison](../../../images/absolute-stroke-width-compare.png?raw=true "Absolute stroke width comparison")
+
+### Adjusting stroke width with `absoluteStrokeWidth` prop
+
+Setting `absoluteStrokeWidth` to `true` will make the stroke width absolute.
+
+<Sandpack
+  template="vue"
+  :theme="sandpackTheme"
+  :files="absoluteStrokeWidth"
+  :customSetup='{
+    dependencies: {
+      "lucide-vue-next": "latest"
+    }
+  }'
+  :options="{
+    editorHeight: 320,
+    editorWidthPercentage: 60,
+  }"
+/>