https://github.com/kwooshung/react-icons
It is more convenient to use svg as React icon, which has strong operability and high degree of freedom.
https://github.com/kwooshung/react-icons
icon icons react svg
Last synced: about 2 months ago
JSON representation
It is more convenient to use svg as React icon, which has strong operability and high degree of freedom.
- Host: GitHub
- URL: https://github.com/kwooshung/react-icons
- Owner: kwooshung
- License: mit
- Created: 2024-02-15T08:39:55.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-06T12:13:41.000Z (5 months ago)
- Last Synced: 2025-03-30T18:01:44.522Z (2 months ago)
- Topics: icon, icons, react, svg
- Language: JavaScript
- Homepage:
- Size: 279 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: changelogs/.history
- License: LICENSE
Awesome Lists containing this project
README
# @kwooshung/react-icons
## It is more convenient to use `svg` as `React` icon, which has strong operability and high degree of freedom.
[](LICENSE)
[](https://www.npmjs.com/package/@kwooshung/react-icons)
[](https://www.npmjs.com/package/@kwooshung/react-icons)
[](https://github.com/kwooshung/React-Icons/actions/)
[](https://codecov.io/gh/kwooshung/React-Icons)
[](https://codeclimate.com/github/kwooshung/React-Icons/maintainability)
[](https://gitee.com/kwooshung/React-Icons/)
# Why Develop It?
- So, I think directly importing icons as components into my project is the most suitable way for me.
- Because current **React websites** only load the entire page during the initial load. During route switching, there's no whole page reload, and writing them once in the global structure won't pose any performance issues (after all, the dynamic creation process of [IconFont](https://www.iconfont.cn/) scripts works the same way).
# What Pain Points Does It Solve?
- Why not directly import SVGs and auto-generate icons?
- Because I don't like this way of importing, and the componentization functionality is not strong or flexible enough.
- Why not directly use [IconFont](https://www.iconfont.cn/) to import **script**?
- I quite like this method, but it’s troublesome to manage icons on the official website every time;
- It's also bothersome to upload my own icons, especially since the review mechanism is very strict; for example, I wanted to upload a Chinese flag icon to support internationalization, but the review system didn't allow it;
- There was an incident where [IconFont](https://www.iconfont.cn/) suddenly announced they would close their CDN service. Although the existing icon links were not affected, modifying the icon library became impossible, and I had to download them myself. Later on, they reopened the service, but such instability is worrying;
- Full control over tags and SVG structure;
- Supports **prefix** for easy management;
# Why Use It?
- Supports custom SVG icons, allowing you to use any icons you like;
- Supports customization of the loading bar's style, such as color, size, rotation direction, and animation;
- Supports bilingual annotations in both English and Chinese;
- Low learning curve, simple and flexible usage;
- Implemented using modern features of **ES6**;
- Written in **TypeScript** for type safety;
- Supports modular import on demand with `esm`, natively supporting **tree-shaking**, so there's no need to worry about the package size post-compilation;
- This project also provides a `commonjs` (`cjs`) version;
- Test coverage **100%**;
# Installation
## npm
```bash
npm install @kwooshung/react-icons
```
## yarn
```bash
yarn add @kwooshung/react-icons
```
## pnpm
```bash
pnpm add @kwooshung/react-icons
```
# Usage
## Style
In some frameworks, you can directly import the styles in the global `css` / `less` / `scss` files as shown below:
```css
@import url('@kwooshung/react-icons/dist/index.css');
```
In certain frameworks, like `Next.js`, you may need to add a `~` symbol for it to work, as shown below:
```css
@import url('~@kwooshung/react-icons/dist/index.css');
```
You can also import it in a global page, such as the `Layout` page in `Next.js`, or within the corresponding component, as shown below:
```tsx
import '@kwooshung/react-icons/dist/index.css';
```
## Components
Introduced in a global component, such as `Layout.tsx`, as shown below:
```tsx
import '@kwooshung/react-icons/dist/index.css';
import { IconProvider, Icon } from '@kwooshung/react-icons';
const icons = (
<>
>
);
const Demo = () => {
return (
);
};
export default Demo;
```
# API
## Props
For the following types, please refer to: [interfaces.d.ts](src/icons/interfaces.d.ts)
### IconProvider
### Props
| Parameters | Description | Type | Default value | Required |
| ---------- | ----------- | ------------- | ---------------- | -------- |
| icons | Icon Groups | `JSX.Element` | `React.Fragment` | Yes |
| prefix | Icon Prefix | `string` | `''` | No |
### Icon
#### Props
| Parameters | Description | Type | Default value | Required |
| ---------- | ------------------ | -------------------- | ------------- | -------- |
| name | Icon Name | `string` | - | Yes |
| id | ID | `string` | - | No |
| className | className Style | `string` | - | No |
| size | Size | `number` | `0` | No |
| rotate | Rotation angle | `number` | `0` | No |
| spin | Rotation animation | `number`\| `boolean` | `0` | No |
#### Events
| Parameters | Description | Type |
| ------------- | ------------------ | ---------------------------------------- |
| onClick | Click event | `(e: MouseEvent) => void` |
| onDoubleClick | Double click event | `(e: MouseEvent) => void` |