Bắt Đầu Nhanh
Tùy Chọn 1: CDN (Nhanh Nhất)
Thêm một thẻ script vào HTML của bạn. Đó là tất cả!
<script src="https://cdn.viconic.dev/js/copyicons-smart-loader.min.js"></script>
<viconic-icon icon="ti:home"></viconic-icon>
<viconic-icon icon="ti:search" style="font-size: 32px;"></viconic-icon>
<viconic-icon icon="ti:heart" style="color: red;"></viconic-icon>
Icons được tải từ CDN khi chạy. Kích thước bundle của bạn vẫn là 0KB.
Tùy Chọn 2: React
Cài đặt package:
npm install viconic-react-icons
Sau đó sử dụng trong các component của bạn:
import { ViconicIcon } from "viconic-react-icons";
function App() {
return (
<div>
<ViconicIcon name="ti:home" />
<ViconicIcon name="ti:search" size={32} />
<ViconicIcon name="ti:heart" color="red" />
</div>
);
}
Hoạt động với React, Next.js, Vue, Angular, Svelte — bất cứ thứ gì hỗ trợ SVG.
Tùy Chọn 3: SVG Thô
Truy cập trang chi tiết của bất kỳ icon nào, sao chép mã SVG và dán trực tiếp vào dự án của bạn. Không cần CDN, không cần dependencies.
Tìm Kiếm Icons
Truy cập trang chính của Viconic và nhập bất kỳ từ khóa nào — home, arrow, user, settings. Kết quả cập nhật tự động.
Bạn có thể lọc theo:
- Kiểu dáng (một màu, hai màu, nhiều màu)
- Bộ sưu tập (Lucide, Tabler, Font Awesome, v.v.)
- Giấy phép (MIT, Apache 2.0, CC BY, v.v.)
Nhấn Ctrl+K (hoặc ⌘K trên Mac) từ bất kỳ đâu trên trang để nhảy thẳng đến tìm kiếm.
Chọn Marquee
Ở chế độ Select, kéo chuột để vẽ một hộp lựa chọn. Mọi icon bên trong sẽ được thêm vào Kit của bạn cùng một lúc. Hữu ích khi bạn cần một loạt icons nhanh chóng.
Tùy Chỉnh Icons
Thay Đổi Màu Sắc qua CDN:
<viconic-icon icon="ti:home" style="color: red;"></viconic-icon>
Thay Đổi Màu Sắc trong React:
<ViconicIcon name="ti:home" style={{ color: "red" }} />
Với Tailwind CSS:
<ViconicIcon name="ti:home" className="w-8 h-8 text-blue-500" />
Thay Đổi Kích Thước:
<viconic-icon icon="ti:home" style="font-size: 32px;"></viconic-icon>
Kit Builder
Một Kit là một bộ sưu tập tùy chỉnh các icons bạn chọn cho một dự án cụ thể. Mỗi Kit có liên kết CDN riêng — vì vậy bạn chỉ tải chính xác các icons mà dự án của bạn cần.
Để tạo một Kit:
- Truy cập viconic.dev/kits
- Nhấp "Create Kit" và đặt tên và tiền tố cho nó
- Duyệt icons và nhấp "Add to Kit"
- Nhấp nút cập nhật để tạo liên kết CDN riêng của bạn
Sau đó sử dụng Kit CDN của bạn trong bất kỳ dự án nào:
<script src="https://cdn.viconic.dev/kits/YOUR_PREFIX/loader.js"></script>
Điều này đặc biệt hữu ích nếu bạn làm việc ngoại tuyến — xây dựng Kit của bạn một lần, sau đó sử dụng liên kết được tạo ở bất kỳ đâu mà không cần truy cập CDN chính của Viconic mỗi lần.
Trình Chỉnh Sửa SVG
Viconic có một trình chỉnh sửa SVG tích hợp. Bạn có thể:
- Tải lên bất kỳ tệp SVG nào hoặc tải một icon từ thư viện
- Chỉnh sửa mã SVG với tô sáng cú pháp và xem trước trực tiếp
- Thay đổi nền (lưới / sáng / tối)
- Lật, xoay hoặc tối ưu hóa SVG
- Xuất dưới dạng SVG, PNG, React component hoặc React Native component
Các tệp SVG không bao giờ được gửi đến máy chủ — mọi thứ chạy trong trình duyệt của bạn.
Phím Tắt
| Phím Tắt | Chức Năng |
|---|---|
| Ctrl+K / ⌘K | Tập trung tìm kiếm (ở bất kỳ đâu trên trang) |
| Esc | Đóng bất kỳ hộp thoại nào |
| Kéo chuột | Chọn marquee nhiều icons (chỉ ở chế độ Select) |
Câu Hỏi Thường Gặp
Nó có miễn phí không? Có. Mọi bộ sưu tập icon trên Viconic đều miễn phí. Hầu hết sử dụng giấy phép MIT hoặc Apache 2.0, hoặc mã nguồn mở cho phép sử dụng thương mại. Tuy nhiên vẫn sẽ có các bộ collection sẽ có giấy phép khá là khắt khe cho thương mại. Vì vậy mà hãy kiểm tra giấy phép trên trang chi tiết của mỗi bộ sưu tập.
CDN có giới hạn băng thông không? Không có giới hạn cho mục đích sử dụng bình thường. Icons được phục vụ thông qua mạng edge toàn cầu.
Trình Chỉnh Sửa SVG có lưu trữ tệp của tôi không? Không. Mọi thứ chạy phía máy khách. Các tệp SVG của bạn không bao giờ rời khỏi trình duyệt.
Những framework nào được hỗ trợ? HTML, React, Next.js, Vue, Angular, Svelte, React Native — bất cứ thứ gì hỗ trợ SVG.
Tài Nguyên
- Trang Web Chính: https://viconic.dev
- NPM Package:
viconic-react-icons
