Еще больше значков, которые мы можем добавить в наше приложение React, с помощью значков React

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.