Tên biểu tượng là phiên bản PascalCase
của tên gốc. Đối với những biểu tượng có tên bắt đầu bằng một số, tiền tố Icon
sẽ được sử dụng. ví dụ. arrow-right
→ ArrowRight
, yarn add react-bootstrap-icons
0 → yarn add react-bootstrap-icons
1
Không có lỗ hổng trực tiếp nào được tìm thấy cho gói này trong cơ sở dữ liệu lỗ hổng của Snyk. Điều này không bao gồm các lỗ hổng thuộc phần phụ thuộc của gói này
Dự án của bạn có dựa vào các gói phụ thuộc dễ bị tổn thương không?Tự động tìm và sửa các lỗ hổng ảnh hưởng đến dự án của bạn. Snyk quét các lỗ hổng [trong cả gói của bạn và phần phụ thuộc của chúng] và cung cấp các bản sửa lỗi tự động miễn phí
Tiếp theo bài đăng của tôi về cách tạo nút bằng React và Bootstrap, đây là hướng dẫn sử dụng Biểu tượng React Bootstrap. Trước khi đi sâu vào chi tiết, tôi cho rằng bạn đã tạo ứng dụng React rồi, vì vậy khi bạn đã sẵn sàng bắt đầu tập trung vào việc sử dụng biểu tượng React Bootstrap trong ứng dụng React của mình, bạn sẽ cần cài đặt bootstrap và cài đặt các biểu tượng react-bootstrap. Đọc tiếp để biết chi tiết về từng bước này và các ví dụ về cách thay đổi màu sắc và kích thước của biểu tượng Reac-bootstrap-icon
Mục lục
Cài đặt Bootstrap
Kiểm tra phiên bản mới nhất tại đây – https. //reac-bootstrap. github. io/getting-started/introduction/ rồi làm theo hướng dẫn mới nhất của họ, nhưng bạn sẽ cần sử dụng lệnh như sau để cài đặt gói mới nhất cho ứng dụng React của mình
npm install react-bootstrap bootstrap@5.1.3
Sau đó, hãy tham khảo chính tệp css Bootstrap từ chỉ mục của bạn. js, bằng cách thêm một dòng như thế này
//add this line to the top of your file import "bootstrap/dist/css/bootstrap.min.css"; import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; ReactDOM.render[ , document.getElementById["root"] ]; // If you want to start measuring performance in your app, pass a function // to log results [for example: reportWebVitals[console.log]] // or send to an analytics endpoint. Learn more: //bit.ly/CRA-vitals reportWebVitals[];
Cài đặt gói React Bootstrap Icons
Để sử dụng gói
//add this line to the top of your file import "bootstrap/dist/css/bootstrap.min.css"; import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; ReactDOM.render[ , document.getElementById["root"] ]; // If you want to start measuring performance in your app, pass a function // to log results [for example: reportWebVitals[console.log]] // or send to an analytics endpoint. Learn more: //bit.ly/CRA-vitals reportWebVitals[];0, bạn cần cài đặt nó từ đây. Một lần nữa, hãy làm theo hướng dẫn của họ để biết lệnh cập nhật nhất, nhưng bạn sẽ cần sử dụng lệnh như thế này để cài đặt gói bằng npm
npm install react-bootstrap-icons --save
…hoặc nếu bạn sử dụng Yarn
yarn add react-bootstrap-icons
Xem và sử dụng biểu tượng React Bootstrap
Toàn bộ thư viện biểu tượng Bootstrap có ở đây để xem, vì vậy khi bạn đã tìm thấy [các] biểu tượng mình muốn sử dụng, hãy ghi lại tên. Bạn có thể tìm kiếm các biểu tượng, vì vậy, giả sử bạn đang tìm kiếm một biểu tượng để thực hiện với biểu đồ, bạn sẽ tìm kiếm như thế này
Bạn cần nhập từng biểu tượng từ gói
//add this line to the top of your file import "bootstrap/dist/css/bootstrap.min.css"; import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; ReactDOM.render[ , document.getElementById["root"] ]; // If you want to start measuring performance in your app, pass a function // to log results [for example: reportWebVitals[console.log]] // or send to an analytics endpoint. Learn more: //bit.ly/CRA-vitals reportWebVitals[];0 đã cài đặt bằng cách sử dụng tên của nó. Trong Mã VS, khi bạn bắt đầu nhập tên trong dấu ngoặc nhọn, bạn sẽ thấy danh sách tự động hoàn thành xuất hiện tất cả các biểu tượng có sẵn. Vì vậy, việc nhập biểu tượng BarChartLineFill sẽ như thế này
import { BarChartLineFill } from "react-bootstrap-icons";
…. hoặc bạn có thể nhập cả gói
import * as Icon from 'react-bootstrap-icons';
Khi bạn đã nhập
//add this line to the top of your file import "bootstrap/dist/css/bootstrap.min.css"; import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; ReactDOM.render[ , document.getElementById["root"] ]; // If you want to start measuring performance in your app, pass a function // to log results [for example: reportWebVitals[console.log]] // or send to an analytics endpoint. Learn more: //bit.ly/CRA-vitals reportWebVitals[];0, bạn đã sẵn sàng để thêm chúng vào đúng vị trí trong trang của mình. Để hiển thị biểu tượng BarChart trong trang, bạn chỉ cần tham khảo nó như thế này
Đó là ví dụ đơn giản nhất về cách sử dụng biểu tượng Bootstrap React. Có khả năng là bạn sẽ muốn thay đổi màu sắc hoặc kích thước của biểu tượng – hãy đọc tiếp để tìm hiểu cách thay đổi màu sắc hoặc kích thước của các biểu tượng
Thay đổi kích thước và màu sắc Biểu tượng React Bootstrap
Đơn giản chỉ cần thay đổi kích thước và/hoặc màu sắc có thể được thực hiện như thế này, bằng cách chuyển một giá trị màu vào thuộc tính màu và một đơn vị kích thước thích hợp vào thuộc tính kích thước
Thay đổi màu di chuột của biểu tượng React Bootstrap
Để đổi màu icon khi rê chuột vào là xong bằng css. Trong ví dụ này, chúng tôi sẽ sử dụng biểu tượng Wifi, vì vậy hãy đặt đánh dấu cơ bản như thế này, tham chiếu đến một lớp css có tên là 'wifi'
Bạn có thể thiết lập lớp học này trong Ứng dụng. css, cùng với một lớp dành riêng cho trạng thái di chuột
.wifi { color: lightblue; } .wifi:hover { color: darkblue; }
Bây giờ bạn sẽ tìm thấy các thay đổi về màu sắc khi di chuột qua biểu tượng React Bootstrap. Tôi đã bao gồm một số mã cung cấp cho bạn các biểu tượng được hiển thị trong hình ảnh này, đưa ra các ví dụ về kích thước và màu sắc khác nhau cũng như hai cách khác nhau để sử dụng css để thay đổi màu di chuột của biểu tượng