Hướng dẫn react-bootstrap-icons list - danh sách biểu tượng react-bootstrap
|
Thư viện biểu tượng bootstrap hoàn toàn mới để sử dụng làm thành phần React. Hiện tại V1.9.1, hơn 1600 biểu tượng!1600 icons! Cài đặtnpm install react-bootstrap-icons --save hoặc yarn add react-bootstrap-icons Cách sử dụngimport React from 'react'; import { ArrowRight } from 'react-bootstrap-icons'; export default function App() { return <ArrowRight />; } Các biểu tượng có thể được cấu hình với đạo cụ nội tuyến: <ArrowRight color="royalblue" size={96} /> Bạn có thể vượt qua các đạo cụ Wathever bạn muốn: <ArrowRight className="ml-4" /> Bạn cũng có thể bao gồm toàn bộ gói biểu tượng: import React from 'react'; import * as Icon from 'react-bootstrap-icons'; export default function App() => { return <Icon.ArrowRight /> }; Tên biểu tượng là phiên bản yarn add react-bootstrap-icons0 → yarn add react-bootstrap-icons1. Plugin figmaBạn có thể cài đặt nó từ plugin Ứng dụng Figma: Bootstrap cho FIGMA Lựa chọn khácNhững cách khác để sử dụng các biểu tượng boostrap: https://icons.getbootstrap.com/#usage Giấy phép
Cộng tác viên
Phản ứng bootstrap 5 thành phần biểu tượngCách sử dụng cơ bảnBạn có thể đặt các biểu tượng ở bất cứ đâu bằng cách sử dụng yarn add react-bootstrap-icons2 và tên biểu tượng trong thuộc tính yarn add react-bootstrap-icons3. Các biểu tượng được thiết kế để được sử dụng với các phần tử nội tuyến (chúng tôi thích thẻ yarn add react-bootstrap-icons4 cho sự ngắn gọn, nhưng sử dụng yarn add react-bootstrap-icons5 là chính xác về mặt ngữ nghĩa hơn). Để tăng kích thước biểu tượng so với container của họ, hãy sử dụng yarn add react-bootstrap-icons6 Prop với yarn add react-bootstrap-icons7, yarn add react-bootstrap-icons8, yarn add react-bootstrap-icons9 (tăng 33%) hoặc sử dụng kích thước theo nghĩa đen (để mở rộng từ 1x đến 10x) , import React from 'react'; import { ArrowRight } from 'react-bootstrap-icons'; export default function App() { return <ArrowRight />; }7, import React from 'react'; import { ArrowRight } from 'react-bootstrap-icons'; export default function App() { return <ArrowRight />; }8.33% increase), or use literal sizes (to scale it from 1x to 10x) import React from 'react'; import { ArrowRight } from 'react-bootstrap-icons'; export default function App() { return <ArrowRight />; }0, import React from 'react'; import { ArrowRight } from 'react-bootstrap-icons'; export default function App() { return <ArrowRight />; }1, import React from 'react'; import { ArrowRight } from 'react-bootstrap-icons'; export default function App() { return <ArrowRight />; }2, import React from 'react'; import { ArrowRight } from 'react-bootstrap-icons'; export default function App() { return <ArrowRight />; }3, import React from 'react'; import { ArrowRight } from 'react-bootstrap-icons'; export default function App() { return <ArrowRight />; }4, import React from 'react'; import { ArrowRight } from 'react-bootstrap-icons'; export default function App() { return <ArrowRight />; }5, import React from 'react'; import { ArrowRight } from 'react-bootstrap-icons'; export default function App() { return <ArrowRight />; }6, import React from 'react'; import { ArrowRight } from 'react-bootstrap-icons'; export default function App() { return <ArrowRight />; }7, import React from 'react'; import { ArrowRight } from 'react-bootstrap-icons'; export default function App() { return <ArrowRight />; }8. Bạn có thể làm cho tất cả các biểu tượng của mình có cùng chiều rộng để chúng có thể dễ dàng căn chỉnh theo chiều dọc, như trong một danh sách hoặc menu điều hướng. Vượt qua import React from 'react'; import { ArrowRight } from 'react-bootstrap-icons'; export default function App() { return <ArrowRight />; }9 trên biểu tượng để đặt một hoặc nhiều biểu tượng thành cùng một chiều rộng cố định. Điều này là tuyệt vời để sử dụng khi các chiều rộng biểu tượng khác nhau (ví dụ: một biểu tượng cao nhưng gầy trên một biểu tượng rộng nhưng ngắn) sẽ loại bỏ sự liên kết thẳng đứng. Để rõ ràng trong ví dụ sau, chúng tôi đã thêm một màu nền trên biểu tượng để bạn có thể thấy chiều rộng cố định và cũng tăng kích thước phông chữ của phần tử cha. trượt băng Trượt tuyết Trượt tuyết Bắc Âu Trượt tuyết Đồ ủi tuyết <ArrowRight color="royalblue" size={96} />0 Chất rắn Thường xuyên Nhãn hiệu Muộn nhất Danh mục tìm kiếm Khả năng tiếp cận Loài vật Mũi tên Video âm thanh Ô tô Mùa thu Các tòa nhà Việc kinh doanh Từ thiện Trò chuyện Cờ vua Mã số Liên lạc Máy tính Tiền tệ Ngày giờ Vận chuyển Thiết kế Biên tập viên Giáo dục Biểu tượng cảm xúc Các tập tin Món ăn Giới tính Halloween Tay Sức khỏe Ngày lễ Hình ảnh Giao diện Hậu cần Bản đồ Tiếp thị toán học Thuộc về y học Di chuyển Các đối tượng Thanh toán mua sắm Chính trị Lập trình Tôn giáo Hình dạng Spinners Phần mềm Các môn thể thao Trạng thái Máy tính bảng-gaming Đi du lịch Người dùng Xe cộ Thời tiết Mùa đông Viết |
