Biểu tượng phản ứng CSS

Các biểu tượng được sử dụng trong hầu hết các ứng dụng và trang web. Một trong những công cụ tốt nhất hiện có để thêm biểu tượng vào ứng dụng React là thư viện Biểu tượng React

Gói này tập hợp các thư viện biểu tượng phổ biến nhất thành một. Tại thời điểm viết bài này, bạn có thể sử dụng các biểu tượng từ 21 thư viện biểu tượng khác nhau. Một số cái phổ biến hơn bao gồm Font Awesome, Material Design, Ant Design, Feather, v.v.

Để xem danh sách đầy đủ các biểu tượng và các thư viện khác nhau, hãy xem tài liệu của chúng bên dưới

Biểu tượng phản ứng

Bao gồm các biểu tượng phổ biến trong các dự án React của bạn một cách dễ dàng với các biểu tượng phản ứng, sử dụng nhập ES6 cho phép bạn…

biểu tượng phản ứng. github. io

Trong bài viết này, tôi sẽ hướng dẫn các bạn cách cài đặt thư viện, sử dụng và tạo kiểu icon trong ứng dụng React

Cài đặt

Bước này thật dễ dàng. Khi bạn đã thiết lập ứng dụng phản ứng cơ bản, hãy cài đặt gói biểu tượng phản ứng trong dự án của bạn. Điều này sẽ cung cấp cho bạn quyền truy cập vào tất cả các biểu tượng khác nhau

biểu tượng phản ứng

Các biểu tượng SVG React của các gói biểu tượng phổ biến sử dụng nhập ES6

www. npmjs. com

npm install react-icons

Sử dụng các biểu tượng

Để bắt đầu, hãy truy cập trang web tài liệu của họ, nơi bạn có thể tìm kiếm một biểu tượng mà bạn muốn sử dụng

Nếu tôi tìm kiếm, “Twitter”, tôi sẽ có 18 tùy chọn biểu tượng khác nhau để lựa chọn

Mỗi thư viện biểu tượng có thư mục con riêng. Khi bạn nhập một biểu tượng vào ứng dụng của mình, hãy đảm bảo nhập từ đúng thư mục con

Ví dụ: nếu bạn muốn sử dụng biểu tượng FaTwitter như đã thấy ở trên, câu lệnh nhập của bạn sẽ như thế này

import { FaTwitter } from 'react-icons/fa';

Để hiển thị biểu tượng, hãy trả lại biểu tượng dưới dạng thành phần

Trong ví dụ của tôi, tôi sẽ sử dụng tất cả các biểu tượng cho Twitter, Medium, GitHub và LinkedIn từ thư viện Font Awesome. Sau khi nhập và hiển thị các icon sẽ như thế này. Hiện tại, chúng khá nhỏ và không màu. Hãy thêm một số kiểu dáng cho chúng

Tạo kiểu cho các biểu tượng

Có một vài cách khác nhau để tạo kiểu cho các biểu tượng

Để tạo kiểu cho một biểu tượng, bạn chỉ cần chuyển các đạo cụ cho chính biểu tượng đó. Ví dụ: nếu bạn muốn thay đổi màu sắc, bạn có thể chuyển một giá trị có tên là color như bên dưới

Nếu bạn đang tạo kiểu cho nhiều biểu tượng, có một

import { IconContext } from 'react-icons';

4 mà bạn có thể sử dụng làm trình bao bọc. Bất kỳ biểu tượng nào trong nhà cung cấp trình bao bọc này sẽ được áp dụng các kiểu

Để sử dụng

import { IconContext } from 'react-icons';

4, trước tiên hãy nhập nó từ thư viện

import { IconContext } from 'react-icons';

6

import { IconContext } from 'react-icons';

Sau đó, bọc các biểu tượng bạn muốn với nhà cung cấp

import { IconContext } from 'react-icons';

4. Truyền một giá trị chống đỡ với các kiểu bạn muốn áp dụng cho các biểu tượng

Trong ví dụ của chúng tôi, chúng tôi sẽ bọc các biểu tượng bằng

import { FaTwitter } from 'react-icons/fa';

0 và đặt kích thước của mỗi biểu tượng thành 5rem

Bây giờ các biểu tượng của chúng tôi lớn hơn và có một số màu sắc

Nếu bạn muốn tạo kiểu trong một tệp CSS riêng biệt, một cách khác để tạo kiểu cho các biểu tượng là thêm

import { FaTwitter } from 'react-icons/fa';

1 vào biểu tượng riêng lẻ hoặc vào nhà cung cấp. Sau đó, bạn có thể thêm các kiểu trong một tệp riêng

Cảm ơn vì đã đọc. Thêm và tạo kiểu cho các biểu tượng trong ứng dụng React của bạn thật đơn giản. Tôi hy vọng bài viết này hữu ích cho bạn khi bắt đầu với thư viện Biểu tượng React

Bao gồm các biểu tượng phổ biến trong các dự án React của bạn một cách dễ dàng với

import { FaBeer } from "react-icons/fa";

function Question() {
  return (
    <h3>
      {" "}
      Lets go for a <FaBeer />?{" "}
    </h3>
  );
}

5, sử dụng nhập ES6 cho phép bạn chỉ bao gồm các biểu tượng mà dự án của bạn đang sử dụng

Cài đặt (đối với dự án hiện đại tiêu chuẩn)

yarn add react-icons
# or
npm install react-icons --save

sử dụng ví dụ

________số 8

Xem tài liệu để biết thêm các ví dụ sử dụng và cách sử dụng các biểu tượng từ các gói khác. GHI CHÚ. mỗi gói Biểu tượng có thư mục con riêng trong

import { FaBeer } from "react-icons/fa";

function Question() {
  return (
    <h3>
      {" "}
      Lets go for a <FaBeer />?{" "}
    </h3>
  );
}

5 mà bạn nhập từ

Ví dụ: để sử dụng biểu tượng từ Thiết kế Vật liệu, quá trình nhập của bạn sẽ là.

import { FaBeer } from "react-icons/fa";

function Question() {
  return (
    <h3>
      {" "}
      Lets go for a <FaBeer />?{" "}
    </h3>
  );
}

7

Cài đặt (đối với thiên thạch, gatsbyjs, v.v.)

Nếu dự án của bạn phát triển về quy mô, tùy chọn này khả dụng. Phương pháp này có sự đánh đổi là phải mất nhiều thời gian để cài đặt gói

import { FaTwitter } from 'react-icons/fa';

3

sử dụng ví dụ

import { FaTwitter } from 'react-icons/fa';

4

Biểu tượng

Thư viện biểu tượngLicenseVersionCountCircum IconsMPL-2. 0 giấy phépa2924cb1ee37b9fa39ef023a36f1c884b3492e9b285Phông chữ AwesomeCC BY 4. 0 Giấy phép5. 15. 41612Ionic 4MIT4. 6. 3696Ionic 5MIT5. 5. 01332Biểu tượng Thiết kế Vật liệu Giấy phép Apache Phiên bản 2. 04. 0. 0-12-g63c5cb30603650TypiconsCC BY-SA 3. 02. 1. 2336Github Octicons iconMIT8. 5. 0184Lông vũMIT4. 28. 0286Biểu tượng trò chơiCC BY 3. 012920d6565588f0512542a3cb0cdfd36a497f9104040Biểu tượng thời tiếtSIL OFL 1. 12. 0. 12219DeviconsMIT1. 8. 0192Biểu tượng thiết kế kiếnMIT4. 2. 1789Biểu tượng BootstrapMIT1. 5. 01846Remix Icon Giấy phép Apache Phiên bản 2. 02. 5. 02271Biểu tượng màu phẳngMIT1. 0. 2329Grommet-IconsGiấy phép Apache Phiên bản 2. 04. 6. 2615HeroiconsMIT1. 0. 4460Anh hùng 2MIT2. 0. 8530Biểu tượng đơn giảnCC0 1. 0 Phổ thông5. 16. 02024Các biểu tượng đường đơn giảnMIT2. 5. 5189 IcoMoon CC miễn phí BỞI 4. 0 Được cấp phép006795ede82361e1bac1ee76f215cf1dc51e4ca491BoxIconsCC BY 4. 0 Giấy phép2. 0. 9757css. ggMIT2. 0. 0704VS Mã Biểu tượngCC BY 4. 00. 0. 23383Biểu tượng TablerMIT1. 68. 01978Themify Biểu tượngMITv0. 1. 2352Biểu tượng RadixMIT@radix-ui/react-icons@1. 0. 3-30-g237cd76318

Bạn có thể thêm nhiều biểu tượng hơn bằng cách gửi yêu cầu kéo hoặc tạo sự cố

Cấu hình

Bạn có thể định cấu hình các đạo cụ biểu tượng phản ứng bằng React Context API

Yêu cầu phản ứng 16. 3 hoặc cao hơn

import { FaTwitter } from 'react-icons/fa';

5

KeyDefaultNotes

import { FaBeer } from "react-icons/fa";

function Question() {
  return (
    <h3>
      {" "}
      Lets go for a <FaBeer />?{" "}
    </h3>
  );
}

8

import { FaBeer } from "react-icons/fa";

function Question() {
  return (
    <h3>
      {" "}
      Lets go for a <FaBeer />?{" "}
    </h3>
  );
}

9 (kế thừa)

import { FaTwitter } from 'react-icons/fa';

30

import { FaTwitter } from 'react-icons/fa';

31

import { FaTwitter } from 'react-icons/fa';

32

import { FaBeer } from "react-icons/fa";

function Question() {
  return (
    <h3>
      {" "}
      Lets go for a <FaBeer />?{" "}
    </h3>
  );
}

9

import { FaTwitter } from 'react-icons/fa';

34

import { FaBeer } from "react-icons/fa";

function Question() {
  return (
    <h3>
      {" "}
      Lets go for a <FaBeer />?{" "}
    </h3>
  );
}

9Có thể ghi đè kích thước và màu sắc

import { FaTwitter } from 'react-icons/fa';

36

import { FaBeer } from "react-icons/fa";

function Question() {
  return (
    <h3>
      {" "}
      Lets go for a <FaBeer />?{" "}
    </h3>
  );
}

9Bị ghi đè bởi các thuộc tính khác

import { FaTwitter } from 'react-icons/fa';

38

import { FaBeer } from "react-icons/fa";

function Question() {
  return (
    <h3>
      {" "}
      Lets go for a <FaBeer />?{" "}
    </h3>
  );
}

9Mô tả biểu tượng cho khả năng truy cập

Chuyển từ version 2 -> 3

Thay đổi kiểu nhập

Đường dẫn nhập đã thay đổi. Bạn cần viết lại từ kiểu cũ

8

9

Kết thúc với một gói JS lớn?

CSS điều chỉnh

Từ phiên bản 3,

import { FaTwitter } from 'react-icons/fa';

40 không được cung cấp tự động. Vui lòng sử dụng IconContext để chỉ định tên lớp hoặc chỉ định kiểu nội tuyến

Kiểu dáng nội tuyến toàn cầu

1

Toàn cầu

import { FaTwitter } from 'react-icons/fa';

32 Kiểu dáng

Thành phần

3

CSS

4

Hỗ trợ bản địa TypeScript

Phụ thuộc vào

import { FaTwitter } from 'react-icons/fa';

42 có thể bị xóa

sợi

import { FaBeer } from "react-icons/fa";

function Question() {
  return (
    <h3>
      {" "}
      Lets go for a <FaBeer />?{" "}
    </h3>
  );
}

0

NPM

import { FaBeer } from "react-icons/fa";

function Question() {
  return (
    <h3>
      {" "}
      Lets go for a <FaBeer />?{" "}
    </h3>
  );
}

1

Đóng góp

Phát triển

import { FaBeer } from "react-icons/fa";

function Question() {
  return (
    <h3>
      {" "}
      Lets go for a <FaBeer />?{" "}
    </h3>
  );
}

2

Xem trước

Trang web xem trước là trang web

import { FaBeer } from "react-icons/fa";

function Question() {
  return (
    <h3>
      {" "}
      Lets go for a <FaBeer />?{" "}
    </h3>
  );
}

5, được xây dựng trong NextJS

import { FaBeer } from "react-icons/fa";

function Question() {
  return (
    <h3>
      {" "}
      Lets go for a <FaBeer />?{" "}
    </h3>
  );
}

3

Thử nghiệm

Bản trình diễn là một bản soạn sẵn của Ứng dụng Tạo phản ứng với

import { FaBeer } from "react-icons/fa";

function Question() {
  return (
    <h3>
      {" "}
      Lets go for a <FaBeer />?{" "}
    </h3>
  );
}

5 được thêm vào dưới dạng phần phụ thuộc để dễ kiểm tra

import { FaBeer } from "react-icons/fa";

function Question() {
  return (
    <h3>
      {" "}
      Lets go for a <FaBeer />?{" "}
    </h3>
  );
}

4

Tại sao phản ứng các thành phần SVG thay vì phông chữ?

SVG là. Với

import { FaBeer } from "react-icons/fa";

function Question() {
  return (
    <h3>
      {" "}
      Lets go for a <FaBeer />?{" "}
    </h3>
  );
}

5, bạn chỉ có thể cung cấp các biểu tượng cần thiết thay vì một tệp phông chữ lớn cho người dùng, giúp bạn nhận ra biểu tượng nào được sử dụng trong dự án của mình

Làm cách nào để sử dụng biểu tượng phản ứng trong CSS?

Tôi có thể thay đổi màu biểu tượng phản ứng không?

Tôi có thể sử dụng các biểu tượng Bootstrap trong phản ứng không?