Biểu tượng React-bootstrap

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-icons0 → yarn add react-bootstrap-icons1

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 [email protected]

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: https://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: https://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: https://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: https://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

Làm cách nào để lấy biểu tượng trong Bootstrap?

Làm cách nào để thêm biểu tượng bên trong trường trong phản ứng bootstrap?

Làm cách nào để sử dụng các biểu tượng Bootstrap trong js tiếp theo?

Thư viện biểu tượng tốt nhất cho phản ứng là gì?