feat(tailwind): add lucide icon support via iconify plugin (#5453)

2026-03-07 22:20:03 +00:00 · 2025-09-10 10:20:25 +09:00
parent 7d4437c724
commit 5b834acc86
18 changed files with 136 additions and 250 deletions
--- a/src/components/button/IconButton.stories.ts
+++ b/src/components/button/IconButton.stories.ts
@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import { Bell, Download, Heart, Settings, Trophy, X } from 'lucide-vue-next'

 import IconButton from './IconButton.vue'

@@ -33,13 +32,13 @@ type Story = StoryObj<typeof meta>

 export const Primary: Story = {
  render: (args) => ({
-    components: { IconButton, Trophy },
+    components: { IconButton },
    setup() {
      return { args }
    },
    template: `
      <IconButton v-bind="args">
-        <Trophy :size="16" />
+        <i class="icon-[lucide--trophy] size-4" />
      </IconButton>
    `
  }),
@@ -51,13 +50,13 @@ export const Primary: Story = {

 export const Secondary: Story = {
  render: (args) => ({
-    components: { IconButton, Settings },
+    components: { IconButton },
    setup() {
      return { args }
    },
    template: `
      <IconButton v-bind="args">
-        <Settings :size="16" />
+        <i class="icon-[lucide--settings] size-4" />
      </IconButton>
    `
  }),
@@ -69,13 +68,13 @@ export const Secondary: Story = {

 export const Transparent: Story = {
  render: (args) => ({
-    components: { IconButton, X },
+    components: { IconButton },
    setup() {
      return { args }
    },
    template: `
      <IconButton v-bind="args">
-        <X :size="16" />
+        <i class="icon-[lucide--x] size-4" />
      </IconButton>
    `
  }),
@@ -87,13 +86,13 @@ export const Transparent: Story = {

 export const Small: Story = {
  render: (args) => ({
-    components: { IconButton, Bell },
+    components: { IconButton },
    setup() {
      return { args }
    },
    template: `
      <IconButton v-bind="args">
-        <Bell :size="12" />
+        <i class="icon-[lucide--bell] size-3" />
      </IconButton>
    `
  }),
@@ -105,42 +104,42 @@ export const Small: Story = {

 export const AllVariants: Story = {
  render: () => ({
-    components: { IconButton, Trophy, Settings, X, Bell, Heart, Download },
+    components: { IconButton },
    template: `
      <div class="flex flex-col gap-4">
        <div class="flex gap-2 items-center">
          <IconButton type="primary" size="sm" @click="() => {}">
-            <Trophy :size="12" />
+            <i class="icon-[lucide--trophy] size-3" />
          </IconButton>
          <IconButton type="primary" size="md" @click="() => {}">
-            <Trophy :size="16" />
+            <i class="icon-[lucide--trophy] size-4" />
          </IconButton>
        </div>
        <div class="flex gap-2 items-center">
          <IconButton type="secondary" size="sm" @click="() => {}">
-            <Settings :size="12" />
+            <i class="icon-[lucide--settings] size-3" />
          </IconButton>
          <IconButton type="secondary" size="md" @click="() => {}">
-            <Settings :size="16" />
+            <i class="icon-[lucide--settings] size-4" />
          </IconButton>
        </div>
        <div class="flex gap-2 items-center">
          <IconButton type="transparent" size="sm" @click="() => {}">
-            <X :size="12" />
+            <i class="icon-[lucide--x] size-3" />
          </IconButton>
          <IconButton type="transparent" size="md" @click="() => {}">
-            <X :size="16" />
+            <i class="icon-[lucide--x] size-4" />
          </IconButton>
        </div>
        <div class="flex gap-2 items-center">
          <IconButton type="primary" size="md" @click="() => {}">
-            <Bell :size="16" />
+            <i class="icon-[lucide--bell] size-4" />
          </IconButton>
          <IconButton type="secondary" size="md" @click="() => {}">
-            <Heart :size="16" />
+            <i class="icon-[lucide--heart] size-4" />
          </IconButton>
          <IconButton type="transparent" size="md" @click="() => {}">
-            <Download :size="16" />
+            <i class="icon-[lucide--download] size-4" />
          </IconButton>
        </div>
      </div>
--- a/src/components/button/IconGroup.stories.ts
+++ b/src/components/button/IconGroup.stories.ts
@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import { Download, ExternalLink, Heart } from 'lucide-vue-next'

 import IconButton from './IconButton.vue'
 import IconGroup from './IconGroup.vue'
@@ -17,17 +16,17 @@ type Story = StoryObj<typeof IconGroup>

 export const Basic: Story = {
  render: () => ({
-    components: { IconGroup, IconButton, Download, ExternalLink, Heart },
+    components: { IconGroup, IconButton },
    template: `
      <IconGroup>
        <IconButton @click="console.log('Hello World!!')">
-          <Heart :size="16" />
+          <i class="icon-[lucide--heart] size-4" />
        </IconButton>
        <IconButton @click="console.log('Hello World!!')">
-          <Download :size="16" />
+          <i class="icon-[lucide--download] size-4" />
        </IconButton>
        <IconButton @click="console.log('Hello World!!')">
-          <ExternalLink :size="16" />
+          <i class="icon-[lucide--external-link] size-4" />
        </IconButton>
      </IconGroup>
    `
--- a/src/components/button/IconTextButton.stories.ts
+++ b/src/components/button/IconTextButton.stories.ts
@@ -1,14 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import {
-  ChevronLeft,
-  ChevronRight,
-  Download,
-  Package,
-  Save,
-  Settings,
-  Trash2,
-  X
-} from 'lucide-vue-next'

 import IconTextButton from './IconTextButton.vue'

@@ -49,14 +39,14 @@ type Story = StoryObj<typeof meta>

 export const Primary: Story = {
  render: (args) => ({
-    components: { IconTextButton, Package },
+    components: { IconTextButton },
    setup() {
      return { args }
    },
    template: `
      <IconTextButton v-bind="args">
        <template #icon>
-          <Package :size="16" />
+          <i class="icon-[lucide--package] size-4" />
        </template>
      </IconTextButton>
    `
@@ -70,14 +60,14 @@ export const Primary: Story = {

 export const Secondary: Story = {
  render: (args) => ({
-    components: { IconTextButton, Settings },
+    components: { IconTextButton },
    setup() {
      return { args }
    },
    template: `
      <IconTextButton v-bind="args">
        <template #icon>
-          <Settings :size="16" />
+          <i class="icon-[lucide--settings] size-4" />
        </template>
      </IconTextButton>
    `
@@ -91,14 +81,14 @@ export const Secondary: Story = {

 export const Transparent: Story = {
  render: (args) => ({
-    components: { IconTextButton, X },
+    components: { IconTextButton },
    setup() {
      return { args }
    },
    template: `
      <IconTextButton v-bind="args">
        <template #icon>
-          <X :size="16" />
+          <i class="icon-[lucide--x] size-4" />
        </template>
      </IconTextButton>
    `
@@ -112,14 +102,14 @@ export const Transparent: Story = {

 export const WithIconRight: Story = {
  render: (args) => ({
-    components: { IconTextButton, ChevronRight },
+    components: { IconTextButton },
    setup() {
      return { args }
    },
    template: `
      <IconTextButton v-bind="args">
        <template #icon>
-          <ChevronRight :size="16" />
+          <i class="icon-[lucide--chevron-right] size-4" />
        </template>
      </IconTextButton>
    `
@@ -134,14 +124,14 @@ export const WithIconRight: Story = {

 export const Small: Story = {
  render: (args) => ({
-    components: { IconTextButton, Save },
+    components: { IconTextButton },
    setup() {
      return { args }
    },
    template: `
      <IconTextButton v-bind="args">
        <template #icon>
-          <Save :size="12" />
+          <i class="icon-[lucide--save] size-3" />
        </template>
      </IconTextButton>
    `
@@ -156,66 +146,60 @@ export const Small: Story = {
 export const AllVariants: Story = {
  render: () => ({
    components: {
-      IconTextButton,
-      Download,
-      Settings,
-      Trash2,
-      ChevronRight,
-      ChevronLeft,
-      Save
+      IconTextButton
    },
    template: `
      <div class="flex flex-col gap-4">
        <div class="flex gap-2 items-center">
          <IconTextButton label="Download" type="primary" size="sm" @click="() => {}">
            <template #icon>
-              <Download :size="12" />
+              <i class="icon-[lucide--download] size-3" />
            </template>
          </IconTextButton>
          <IconTextButton label="Download" type="primary" size="md" @click="() => {}">
            <template #icon>
-              <Download :size="16" />
+              <i class="icon-[lucide--download] size-4" />
            </template>
          </IconTextButton>
        </div>
        <div class="flex gap-2 items-center">
          <IconTextButton label="Settings" type="secondary" size="sm" @click="() => {}">
            <template #icon>
-              <Settings :size="12" />
+              <i class="icon-[lucide--settings] size-3" />
            </template>
          </IconTextButton>
          <IconTextButton label="Settings" type="secondary" size="md" @click="() => {}">
            <template #icon>
-              <Settings :size="16" />
+              <i class="icon-[lucide--settings] size-4" />
            </template>
          </IconTextButton>
        </div>
        <div class="flex gap-2 items-center">
          <IconTextButton label="Delete" type="transparent" size="sm" @click="() => {}">
            <template #icon>
-              <Trash2 :size="12" />
+              <i class="icon-[lucide--trash-2] size-3" />
            </template>
          </IconTextButton>
          <IconTextButton label="Delete" type="transparent" size="md" @click="() => {}">
            <template #icon>
-              <Trash2 :size="16" />
+              <i class="icon-[lucide--trash-2] size-4" />
            </template>
          </IconTextButton>
        </div>
        <div class="flex gap-2 items-center">
          <IconTextButton label="Next" type="primary" size="md" iconPosition="right" @click="() => {}">
            <template #icon>
-              <ChevronRight :size="16" />
+              <i class="icon-[lucide--chevron-right] size-4" />
            </template>
          </IconTextButton>
          <IconTextButton label="Previous" type="secondary" size="md" @click="() => {}">
            <template #icon>
-              <ChevronLeft :size="16" />
+              <i class="icon-[lucide--chevron-left] size-4" />
            </template>
          </IconTextButton>
          <IconTextButton label="Save File" type="primary" size="md" @click="() => {}">
            <template #icon>
-              <Save :size="16" />
+              <i class="icon-[lucide--save] size-4" />
            </template>
          </IconTextButton>
        </div>
--- a/src/components/button/MoreButton.stories.ts
+++ b/src/components/button/MoreButton.stories.ts
@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import { Download, ScrollText } from 'lucide-vue-next'

 import IconTextButton from './IconTextButton.vue'
 import MoreButton from './MoreButton.vue'
@@ -18,7 +17,7 @@ type Story = StoryObj<typeof MoreButton>

 export const Basic: Story = {
  render: () => ({
-    components: { MoreButton, IconTextButton, Download, ScrollText },
+    components: { MoreButton, IconTextButton },
    template: `
      <div style="height: 200px; display: flex; align-items: center; justify-content: center;">
        <MoreButton>
@@ -29,7 +28,7 @@ export const Basic: Story = {
              @click="() => { close() }"
            >
              <template #icon>
-                <Download :size="16" />
+                <i class="icon-[lucide--download] size-4" />
              </template>
            </IconTextButton>

@@ -39,7 +38,7 @@ export const Basic: Story = {
              @click="() => { close() }"
            >
              <template #icon>
-                <ScrollText :size="16" />
+                <i class="icon-[lucide--scroll-text] size-4" />
              </template>
            </IconTextButton>
          </template>