This is the element using svg symbol as icon in React
^4.1.4 support react >=18.0.0 <20.0.0
- 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
yarn add @acrool/react-iconsvgstep1. 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
import {Icon} from '@/library/acrool-react-icon';
<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!')}/>- Acrool Icon Symbols - svgs build icon-symbols
- Acrool Icon Symbols Cli - svgs build icon-symbols
- acrool - Project management system, providing icon management tools
There is also a example that you can play with it: