아름답고 픽셀 완벽한 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 구성 요소 내부에 앱을 래핑할 수도 있습니다. 이렇게 하면 컨텍스트 내에 있는 모든 아이콘이 공급자 속성을 사용하게 됩니다.

각 아이콘에 대해 특정 소품을 설정하면 제공자 속성을 덮어씁니다.

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;

저장소 확인here

읽어 주셔서 감사합니다