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;
Проверьте репозиторий здесь
Спасибо за прочтение