Write docs for Vue

docs/guide/vue/advanced/examples/global-styling-css-example/App.vue

@@ -0,0 +1,29 @@
+<script setup>
+import {
+  CakeSlice,
+  Candy,
+  Apple,
+  Cookie,
+  Martini,
+  IceCream2,
+  Sandwich,
+  Wine,
+  Dessert,
+} from "lucide-vue-next";
+
+import "./icon.css";
+</script>
+
+<template>
+  <div class="grid">
+    <CakeSlice />
+    <Candy />
+    <Apple />
+    <Cookie />
+    <Martini />
+    <IceCream2 />
+    <Sandwich />
+    <Wine />
+    <Dessert />
+  </div>
+</template>

docs/guide/vue/advanced/examples/global-styling-css-example/files.ts

@@ -0,0 +1,20 @@
+import App from './App.vue?raw'
+import styles from '../../../basics/examples/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/advanced/examples/global-styling-css-example/icon.css

@@ -0,0 +1,14 @@
+.lucide {
+  /* Change this! */
+  color: #ffadff;
+  width: 56px;
+  height: 56px;
+  stroke-width: 1px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr 1fr;
+  gap: 6px;
+}