@vuonweb/react

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

Cài đặt

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

Yêu cầu react >= 18 (peer dependency).

Sử dụng

import { Home, Search, User } from "@vuonweb/react";

function App() {
  return (
    <div>
      <Home />
      <Search size={20} color="#2563eb" />
      <User strokeWidth={1.5} className="text-gray-500" />
    </div>
  );
}

Mỗi icon là một component nhận ref tới phần tử <svg> (React.forwardRef), và có thể truyền mọi thuộc tính SVG hợp lệ khác (className, onClick, aria-label, ...).

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). |

Ngoài ra nhận toàn bộ React.SVGProps<SVGSVGElement> khác (className, style, onClick, ...).

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").

Bạn vẫn có thể override fill/stroke trực tiếp qua props nếu cần — props truyền vào component luôn thắng giá trị mặc định.

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

Bộ icon được sinh từ SVG nguồn ở icons/ và sẽ tiếp tục mở rộng qua các bản phát hành sau.

Xem thêm

• Component tương ứng cho React Native: @vuonweb/react-native
• Vue: @vuonweb/vue
• Svelte: @vuonweb/svelte

License

MIT