React Icons - это библиотека с множеством значков, которые мы можем добавить в наше приложение React.
В этой статье мы рассмотрим, как добавить значки в наше приложение React с помощью значков React.
Иконки Материального Дизайна
Мы можем добавить иконки Material Design из коллекции react-icons/md
.
Например, мы можем написать:
import React from "react"; import { Md3DRotation } from "react-icons/md"; export default function App() { return ( <h3> <Md3DRotation /> </h3> ); }
добавить иконку из коллекции.
Полный список значков можно найти на странице https://react-icons.github.io/react-icons/icons?name=md.
Значок ремикса
React Icons поставляется с коллекцией Remix Icon.
Мы можем импортировать их из модуля react-icons/ri
.
Например, мы можем написать:
import React from "react"; import { RiAncientGateLine } from "react-icons/ri"; export default function App() { return ( <h3> <RiAncientGateLine /> </h3> ); }
Полный список значков можно найти на странице https://react-icons.github.io/react-icons/icons?name=ri.
Простые иконки
Коллекция Simple Icons включена в модуль react-icons/si
React Icon.
Например, мы можем написать:
import React from "react"; import { Si1001Tracklists } from "react-icons/si"; export default function App() { return ( <h3> <Si1001Tracklists /> </h3> ); }
чтобы добавить значок.
Полный список иконок находится на https://react-icons.github.io/react-icons/icons?name=si.
Типиконы
Коллекция Typicons включена в react-icons/ti
модуль React Icons.
Например, мы можем написать:
import React from "react"; import { TiAdjustBrightness } from "react-icons/ti"; export default function App() { return ( <h3> <TiAdjustBrightness /> </h3> ); }
чтобы добавить значок.
Полный список иконок находится на https://react-icons.github.io/react-icons/icons?name=ti.
Значки кода VS
React Icons поставляется со значками, используемыми редактором кода Visual Studio Code.
Иконки включены в коллекцию react-icons/vsc
.
Например, мы можем написать:
import React from "react"; import { VscAccount } from "react-icons/vsc"; export default function App() { return ( <h3> <VscAccount /> </h3> ); }
добавить иконку из коллекции.
Полный список иконок находится на https://react-icons.github.io/react-icons/icons?name=vsc.
Иконки погоды
Мы можем добавить иконки погоды из коллекции Weather Icons.
Они включены в коллекцию react-icons/wi
.
Чтобы добавить один, мы пишем:
import React from "react"; import { WiAlien } from "react-icons/wi"; export default function App() { return ( <h3> <WiAlien /> </h3> ); }
Полный список значков можно найти на странице https://react-icons.github.io/react-icons/icons?name=wi.
css.gg
React Icons поставляется с коллекцией значков css.gg.
Они включены в модуль react-icons/gg
.
Чтобы добавить один, мы пишем:
import React from "react"; import { CgAbstract } from "react-icons/cg"; export default function App() { return ( <h3> <CgAbstract /> </h3> ); }
добавить иконку из коллекции.
Полный список значков можно найти на странице https://react-icons.github.io/react-icons/icons?name=cg.
Заключение
Мы можем добавлять значки из различных библиотек значков в наше приложение React с помощью React Icons.