feat: Icon component

docs/components/f-three.md

@@ -10,7 +10,7 @@
 
 First, let's create a scene with `<f-three>` component. Then let's add `<f-three-mesh>` with `geometry` and `material` props.
 
-Use the mouse or pointer to adjust the rotation of the scene.
+> <Icon id="tabler:hand-finger" /> Use the mouse or pointer to adjust the rotation of the scene.
 
 ```md
 <script setup>

package.json

@@ -42,9 +42,8 @@
   },
   "typings": "./dist/lib.esm.ts",
   "scripts": {
-    "dev": "vite --port 3000 --host -c vite.config.app.ts --open",
-    "build": "vite build -c vite.config.esm.ts && vite build -c vite.config.cjs.ts && vite build -c vite.config.app.ts && vite build -c vite.config.internal.ts",
-    "preview": "vite preview --port 5000",
+    "dev": "vite --open --port 3000 -c vite.config.app.ts",
+    "build": "vite build -c vite.config.app.ts && vite build -c vite.config.esm.ts && vite build -c vite.config.cjs.ts && vite build -c vite.config.internal.ts",
     "test": "vitest",
     "typecheck": "vue-tsc --noEmit",
     "release": "vitest --run && npm run build && vue-tsc --declaration --emitDeclarationOnly",
@@ -61,7 +60,7 @@
   },
   "devDependencies": {
     "@babel/types": "^7.17.0",
-    "@iconify-json/tabler": "^1.1.3",
+    "@iconify-json/tabler": "^1.1.8",
     "@tailwindcss/typography": "^0.5.2",
     "@types/d3-shape": "^3.0.2",
     "@types/katex": "^0.11.1",

src/app.ts

@@ -1,4 +1,4 @@
-import { createApp } from "vue";
+import { createApp, h, shallowRef, watchEffect } from "vue";
 import { createRouter, createWebHistory } from "vue-router";
 
 import routes from "virtual:generated-pages";
@@ -8,7 +8,7 @@ import App from "./App.vue";
 import Layout from "./internal/Layout.vue";
 import Editor from "./internal/Editor.vue";
 import Button from "./internal/Button.vue";
-import IconOne from "~icons/tabler/circle-1";
+import Icon from "./internal/Icon.vue";
 
 import "./app.css";
 
@@ -20,8 +20,13 @@ const router = createRouter({
 const app = createApp(App);
 app.use(router);
 app.use(Fachwerk);
+
+// Used by vue-markdown
 app.component("Layout", Layout);
+
+// Used inside markdown documents
 app.component("Editor", Editor);
 app.component("Button", Button);
-app.component("IconOne", IconOne);
+app.component("Icon", Icon);
+
 app.mount("#app");

src/internal/Content.vue

@@ -23,6 +23,7 @@ const defaultClass = `
   prose-a:text-lightblue-700
   prose-a:underline
   prose-a:underline-offset-2
+  prose-blockquote:text-gray-600
   prose-blockquote:border-l-4
   prose-blockquote:border-yellow-400
   prose-blockquote:pl-6
@@ -68,4 +69,24 @@ const mergedClass = computed(() => twMerge(`${defaultClass} ${customClass}`));
 .prose button {
   @apply text-lightblue-800 inline-block rounded border-2 border-sky-800 px-3 py-1 text-center font-medium hover:bg-black/5;
 }
+.prose > * > h1:first-child,
+.prose > * > h2:first-child,
+.prose > * > h3:first-child,
+.prose > * > h3:first-child,
+.prose > * > h3:first-child,
+.prose > * > h3:first-child,
+.prose > * > h3:first-child,
+.prose > * > h5:first-child,
+.prose > * > h6:first-child {
+  @apply !mt-0;
+}
+
+.prose > * > * > h1,
+.prose > * > * > h2,
+.prose > * > * > h3,
+.prose > * > * > h4,
+.prose > * > * > h5,
+.prose > * > * > h6 {
+  @apply !mt-0;
+}
 </style>

src/internal/Icon.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import tabler from "@iconify-json/tabler/icons.json";
+const icons = { tabler };
+
+type Props = {
+  id: string;
+};
+const { id } = defineProps<Props>();
+const [collection, name] = id.split(":");
+//@ts-ignore
+const icon = icons[collection]?.icons[name]?.body;
+</script>
+
+<template>
+  <svg
+    sstyle="
+      display: inline-block;
+      width: 24px;
+      height: 24px;
+      vertical-align: -webkit-baseline-middle;
+    "
+    class="text-lightgray-600 !inline-block h-5 align-[-webkit-baseline-middle]"
+    viewBox="0 0 24 24"
+    v-html="icon"
+  />
+</template>

vite.config.app.ts

@@ -71,7 +71,6 @@ export default defineConfig({
     ViteIcons({ autoInstall: true }),
   ],
   build: {
-    emptyOutDir: false,
     outDir: "dist/docs",
   },
 });