@vuonweb/vue

Icon components cho Vue 3, sinh tự động từ bộ SVG nguồn của icon-builder.

Cài đặt

npm install @vuonweb/vue
# hoặc: pnpm add @vuonweb/vue / yarn add @vuonweb/vue

Yêu cầu vue >= 3.3 (peer dependency).

Lưu ý: package này phân phối dưới dạng .vue SFC source chưa compile (không có bước bundle riêng) — bundler của app tiêu thụ (Vite, Vue CLI, Nuxt, ...) sẽ compile trực tiếp. Cần project đã có sẵn cấu hình build cho file .vue (mặc định khi dùng create-vue/Vite + plugin Vue); không dùng được qua thẻ <script> trực tiếp trên trình duyệt không qua build step.

Sử dụng

<script setup lang="ts">
import { Home, Search, User } from "@vuonweb/vue";
</script>

<template>
  <Home />
  <Search :size="20" color="#2563eb" />
  <User :stroke-width="1.5" class="text-gray-500" />
</template>

Mọi attribute không khai báo là prop (class, style, @click, ...) tự động fallthrough xuống <svg> gốc nhờ cơ chế $attrs mặc định của Vue 3 — không cần khai báo thêm gì.

Props

| Prop | Type | Default | Mô tả | | ------------- | -------- | ------------- | ------------------------------------------------- | | size | number | 24 | Chiều rộng/cao (px), set cả width và height. | | color | string | currentColor| Set cả fill và stroke; xem cách style bên dưới.| | strokeWidth | number | 2 | Độ dày nét vẽ (chỉ có tác dụng với icon outline). |

Cách color hoạt động theo style icon

• Outline (vd. Home, Search, User, Trashed): chỉ nét vẽ (stroke) phản ứng với color, bên trong rỗng (fill="none").
• Solid (hậu tố Solid, vd. HomeSolid): chỉ phần tô (fill) phản ứng với color, không có nét vẽ (stroke="none").

Icon có sẵn

Naming: icons/outline/<name>.svg → PascalCase (Home), icons/solid/<name>.svg → PascalCase + hậu tố Solid (HomeSolid).

• Home
• HomeSolid
• Search
• Trashed
• User

Xem thêm

• React: @vuonweb/react
• React Native: @vuonweb/react-native
• Svelte: @vuonweb/svelte

License

MIT