@acrool/react-iconsvg v4.2.1

Acrool React IconSvg

^4.1.4 support react >=18.0.0 <20.0.0

Features

• Through the React component method, you can easily use the icon and change the size and color by specifying the Icon code.
• Use Icon Symbols to support multi-color Icon
• Support Nextjs 14+
• Secondary packaging is required

Install

yarn add @acrool/react-iconsvg

Usage

step1. add in your main.tsx

import '@acrool/react-iconsvg/dist/index.css';

step2. copy custom icon component` in your project, copy IconComponent files.

step3. add Svg Symbols file src/library/acrool-react-icon

step4. in your App.tsx

import {SvgSymbol} from '@/library/acrool-react-icon';

const App = () => {
    return <div>
        <MainContent/>

        {SvgSymbol} {/* <~ add this */}
    </div>;
}

step5. add in your eslint ignore

Use Sample

<Icon code="play" color="#fff" size={100}/>
<Icon code="desktop" color="green" size={100}/>
<Icon code="ad" color="var(--primary-color)" size={100}/>
<Icon code={EIconCode.arrow_right} color="secondary" rotate={90} size={100}/>
<Icon code={EIconCode.ad} size={100} hoverColor="red"/>
<Icon code={EIconCode.upload} size={100} activeColor="blud" isActive/>
<Icon code={EIconCode.redo} size={100} isRotateAnimation/>
<Icon code={EIconCode.help} size={100} onClick={() => window.alert('click!')}/>

Tools

Acrool Icon Symbols - svgs build icon-symbols Acrool Icon Symbols Cli - svgs build icon-symbols

Online Manager

acrool - Project management system, providing icon management tools

There is also a example that you can play with it:

License

MIT © Acrool & Imagine