https://github.com/acrool/acrool-react-iconsvg

react icon component by svg symbols
https://github.com/acrool/acrool-react-iconsvg

icon icon-symbols react

Last synced: about 1 year ago
JSON representation

react icon component by svg symbols

• Host: GitHub
• URL: https://github.com/acrool/acrool-react-iconsvg
• Owner: acrool
• License: mit
• Created: 2022-06-24T07:31:11.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2025-05-14T08:54:09.000Z (about 1 year ago)
• Last Synced: 2025-07-05T23:37:14.068Z (about 1 year ago)
• Topics: icon, icon-symbols, react
• Language: TypeScript
• Homepage: https://acrool-react-iconsvg.pages.dev/
• Size: 1.61 MB
• Stars: 13
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Security: SECURITY.md

Awesome Lists containing this project

• awesome-react - Acrool React Icon Symbols - Icon (React underlying structure)

README

          
# Acrool React IconSvg



    





   This is the element using svg symbol as icon in React





[![NPM](https://img.shields.io/npm/v/@acrool/react-iconsvg.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/react-iconsvg)

[![npm](https://img.shields.io/bundlejs/size/@acrool/react-iconsvg?style=for-the-badge)](https://github.com/acrool/react-iconsvg/blob/main/LICENSE)

[![npm](https://img.shields.io/npm/l/@acrool/react-iconsvg?style=for-the-badge)](https://github.com/acrool/acrool-react-iconsvg/blob/main/LICENSE)

[![npm downloads](https://img.shields.io/npm/dm/@acrool/react-iconsvg.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/react-iconsvg)

[![npm](https://img.shields.io/npm/dt/@acrool/react-iconsvg.svg?style=for-the-badge)](https://www.npmjs.com/package/@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

```bash

yarn add @acrool/react-iconsvg

```

## Usage

***step1.*** add in your main.tsx

```ts

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

```

***step2.*** copy custom icon component` in your project, copy [IconComponent](./example/src/library/acrool-react-icon/Icon.tsx) files.

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

***step4.*** in your App.tsx

```tsx

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

const App = () => {

    return 


        


        {SvgSymbol} {/* <~ add this */}

    
;

}

```


***step5.*** add in your eslint ignore

## Use Sample

```tsx

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

 window.alert('click!')}/>

```

## Tools

- [Acrool Icon Symbols](https://github.com/acrool/acrool-icon-symbols) - svgs build icon-symbols

- [Acrool Icon Symbols Cli](https://github.com/acrool/acrool-icon-symbols-cli) - svgs build icon-symbols

## Online Manager

- [acrool](https://docs.acrool.com/icon/manage-icon-symbol) - Project management system, providing icon management tools

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

[![Play react-editext-example](https://raw.githubusercontent.com/acrool/acrool-react-iconsvg/main/play-in-example-button.svg)](https://acrool-react-iconsvg.pages.dev)

## License

MIT © [Acrool](https://github.com/acrool) & [Imagine](https://github.com/imagine10255)