Красивая и пиксельно совершенная библиотека иконок React

React Iconly — Основано на иконках Iconly v2

Одним из этапов, на который мы тратим больше времени при разработке или проектировании веб- или мобильного приложения, является выбор набора иконок, который лучше всего подходит для бренда и того, что мы хотим передать, даже создание собственного набора иконок, если ни одна из них не подходит или мы хотим, чтобы он был уникальным и идентифицировал ваш бренд.

Iconly — один из вариантов, который сегодня используют дизайнеры и разработчики, поэтому я решил создать библиотеку для React / Next.js / Gatsby, которая облегчает его использование, а также позволяет нам настраивать любую иконку в соответствии с нашими потребностями.

Интеграция в ваш проект довольно проста — достаточно выполнить следующие шаги:

Установка

yarn add react-iconly

или

npm install react-iconly

Использование

import React from 'react';
import { Home } from 'react-iconly';

const App = () => {
  return <Home />
};

export default App;

Вы также можете обернуть ваше приложение внутри компонента IconlyProvider, это заставит все иконки, находящиеся в контексте, использовать свойства Provider.

Если вы установите определенные реквизиты для каждой иконки, свойства провайдера будут перезаписаны.

import React from 'react';
import { IconlyProvider, Home, Notification } from 'react-iconly';

const App = () => {
  return (
    <IconlyProvider set="bulk" primaryColor="blueviolet" secondaryColor="blue" stroke="bold" size="xlarge">
      <Home />
      <Notification primaryColor="yellow" />
    </IconlyProvider>
  )
};

export default App;

<Home set="two-tone" primaryColor="blueviolet" secondaryColor="blue" stroke="bold" size="xlarge"/>

Вы также можете включить весь пакет иконок:

import React from 'react';
import * as Iconly from 'react-iconly';

const App = () => {
  return <Iconly.Home set="bulk" primaryColor="blueviolet" secondaryColor="blue" stroke="bold" size="xlarge"/>
};

export default App;

Пример пользовательского стиля

import React from 'react';
import { Send } from 'react-iconly';

const App = () => {
  return <Send style={{ transform: 'rotate(45deg)' }} primaryColor="red" stroke="bold" size="xlarge"/>
};

export default App;

Проверьте репозиторий здесь

Спасибо за прочтение