Add basics section to vue pages

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;
+}