react icons
v5.3.0
Легко добавляйте популярные значки в свои проекты React с помощью react-icons , которая использует импорт ES6, что позволяет вам включать только те значки, которые использует ваш проект.
yarn add react-icons
# or
npm install react-icons --saveпример использования
import { FaBeer } from "react-icons/fa" ;
function Question ( ) {
return (
< h3 >
Lets go for a < FaBeer / > ?
< / h3 >
) ;
} Просмотрите документацию, чтобы узнать о дальнейших примерах использования и о том, как использовать значки из других пакетов. ПРИМЕЧАНИЕ . Каждый пакет значков имеет собственную подпапку в разделе react-icons из которых вы импортируете.
Например, чтобы использовать значок из Material Design , ваш импорт будет таким: import { ICON_NAME } from 'react-icons/md';
Примечание. Эта опция уже некоторое время не выпускалась в новом выпуске. Дополнительная информация №593
Если размер вашего проекта увеличивается, эта опция доступна. Недостатком этого метода является то, что установка пакета занимает много времени.
yarn add @react-icons/all-files
# or
npm install @react-icons/all-files --saveпример использования
import { FaBeer } from "@react-icons/all-files/fa/FaBeer" ;
function Question ( ) {
return (
< h3 >
Lets go for a < FaBeer / > ?
< / h3 >
) ;
} | Библиотека иконок | Лицензия | Версия | Считать |
|---|---|---|---|
| Цирковые иконы | Лицензия MPL-2.0 | 1.0.0 | 288 |
| Шрифт Awesome 5 | Лицензия CC BY 4.0 | 5.15.4-3-gafecf2a | 1612 |
| Шрифт Awesome 6 | Лицензия CC BY 4.0 | 6.5.2 | 2045 |
| Иониконы 4 | Массачусетский технологический институт | 4.6.3 | 696 |
| Иониконы 5 | Массачусетский технологический институт | 5.5.4 | 1332 |
| Иконки материального дизайна | Лицензия Apache версии 2.0 | 4.0.0-98-g9beae745bb | 4341 |
| Типиконы | CC BY-SA 3.0 | 2.1.2 | 336 |
| Иконки Github Octicons | Массачусетский технологический институт | 18.3.0 | 264 |
| Перо | Массачусетский технологический институт | 4.29.1 | 287 |
| Люсиде | ISC | v5.1.0-6-g438f572e | 1215 |
| Иконки игр | CC BY 3.0 | 12920d6565588f0512542a3cb0cdfd36a497f910 | 4040 |
| Иконки погоды | Сил ОФЛ 1.1 | 2.0.12 | 219 |
| Девиконы | Массачусетский технологический институт | 1.8.0 | 192 |
| Иконки дизайна муравьев | Массачусетский технологический институт | 4.4.2 | 831 |
| Иконки начальной загрузки | Массачусетский технологический институт | 1.11.3 | 2716 |
| Иконка Ремикс | Лицензия Apache версии 2.0 | 4.2.0 | 2860 |
| Плоские цветные иконки | Массачусетский технологический институт | 1.0.2 | 329 |
| Люверсы-значки | Лицензия Apache версии 2.0 | 4.12.1 | 635 |
| Героиконы | Массачусетский технологический институт | 1.0.6 | 460 |
| Героиконы 2 | Массачусетский технологический институт | 2.1.3 | 888 |
| Простые иконки | CC0 1.0 Универсальный | 12.14.0 | 3209 |
| Простые иконки линий | Массачусетский технологический институт | 2.5.5 | 189 |
| IcoMoon Бесплатно | Лицензия CC BY 4.0 | d006795ede82361e1bac1ee76f215cf1dc51e4ca | 491 |
| КоробкаИконки | Массачусетский технологический институт | 2.1.4 | 1634 г. |
| css.gg | Массачусетский технологический институт | 2.1.1 | 704 |
| Иконки кода VS | CC BY 4.0 | 0.0.35 | 461 |
| Иконки таблиц | Массачусетский технологический институт | 3.2.0 | 5237 |
| Темизировать иконки | Массачусетский технологический институт | v0.1.2-2-g9600186 | 352 |
| Иконки системы счисления | Массачусетский технологический институт | @radix-ui/[email protected] | 318 |
| Фосфорные иконы | Массачусетский технологический институт | 2.1.1 | 9072 |
| Icons8 Line Потрясающе | Массачусетский технологический институт | 1.3.1 | 1544 г. |
Вы можете добавить больше значков, отправив запросы на включение или создав проблемы.
Вы можете настроить реквизиты реагирующих значков с помощью React Context API.
Требуется React 16.3 или выше.
import { IconContext } from "react-icons" ;
< IconContext . Provider value = { { color : "blue" , className : "global-class-name" } } >
< div >
< FaFolder / >
< / div >
< / IconContext . Provider > ;| Ключ | По умолчанию | Примечания |
|---|---|---|
color | undefined (наследовать) | |
size | 1em | |
className | undefined | |
style | undefined | Можно перезаписать размер и цвет |
attr | undefined | Перезаписано другими атрибутами |
title | undefined | Описание значков специальных возможностей |
Путь импорта изменился. Нужно переписать со старого стиля.
// OLD IMPORT STYLE
import FaBeer from "react-icons/lib/fa/beer" ;
function Question ( ) {
return (
< h3 >
Lets go for a < FaBeer / > ?
< / h3 >
) ;
} // NEW IMPORT STYLE
import { FaBeer } from "react-icons/fa" ;
function Question ( ) {
return (
< h3 >
Lets go for a < FaBeer / > ?
< / h3 >
) ;
}Остался большой пакет JS? Ознакомьтесь с этой проблемой.
Начиная с версии 3, vertical-align: middle не указывается автоматически. Используйте IconContext, чтобы указать имя класса или указать встроенный стиль.
< IconContext . Provider value = { { style : { verticalAlign : 'middle' } } } > className стиляКомпонент
< IconContext . Provider value = { { className : 'react-icons' } } >CSS
. react-icons {
vertical-align : middle;
} Зависимости от @types/react-icons можно удалить.
yarn remove @types/react-iconsnpm remove @types/react-icons ./build-script.sh соберет весь проект. См. также сценарии CI для получения дополнительной информации.
yarn
cd packages/react-icons
yarn fetch # fetch icon sources
yarn buildСначала проверьте обсуждение, чтобы узнать, хочет ли кто-нибудь добавить набор значков.
https://github.com/react-icons/react-icons/discussions/categories/new-icon-set
Файлы SVG, которые необходимо получить, управляются в этом файле. Отредактируйте этот файл и запустите yarn fetch && yarn check && yarn build .
https://github.com/react-icons/react-icons/blob/master/packages/react-icons/src/icons/index.ts
Примечание. В настоящее время проект не принимает активное участие в PR для сайта предварительной версии.
Сайт предварительного просмотра — это веб-сайт react-icons , созданный в Astro+React.
cd packages/react-icons
yarn fetch
yarn build
cd ../preview-astro
yarn start Демо представляет собой шаблон Create React App с добавленными в качестве зависимости react-icons для упрощения тестирования.
cd packages/react-icons
yarn fetch
yarn build
cd ../demo
yarn start SVG поддерживается всеми основными браузерами. С помощью react-icons вы можете предоставлять пользователям только необходимые значки вместо одного большого файла шрифта, помогая вам распознавать, какие значки используются в вашем проекте.
Массачусетский технологический институт
