build: full build with vite

src/components/CustomButton.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface Props {
+  href?: string;
+  color?: string;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+  <component
+    :is="href ? 'a' : 'div'"
+    :class="`button ${color ? 'b-' + color + ' ' + color : ''}`"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<style scoped>
+.button {
+  display: block;
+  width: 100%;
+  text-decoration: none;
+  padding: 1em;
+  margin-bottom: 0.75em;
+  border: 1px solid var(--color-primary);
+  border-radius: 0.5em;
+  background-color: var(--background);
+  cursor: pointer;
+  font-size: 1.333em;
+}
+
+.button:hover {
+  background-color: var(--background-secondary);
+}
+</style>

src/components/LucideIcon.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { computed, onMounted } from "vue";
+import * as icons from "lucide-vue-next";
+
+interface Props {
+  name: string;
+  color?: string;
+  strokeWidth?: string;
+  defaultClass?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  color: "currentColor",
+  strokeWidth: "2",
+  defaultClass: "lucide",
+});
+
+function kebab2camel(kebab: string): string {
+  return kebab
+    .split("-")
+    .map((item) => item.charAt(0).toUpperCase() + item.slice(1).toLowerCase())
+    .join("");
+}
+
+onMounted(() => {
+  console.log(kebab2camel(props.name));
+});
+
+// @ts-expect-error: cannot infer type of all exported data
+const icon = computed(() => icons[kebab2camel(props.name)]);
+</script>
+
+<template>
+  <component
+    :is="icon"
+    :color="color"
+    :stroke-width="strokeWidth"
+    :default-class="defaultClass"
+  />
+</template>