# easy-icons

> Use svg icon like @ant-design/icons.

Latest version **1.1.5** (published 2021-09-27) · ISC license · 0 weekly downloads

## Install

```sh
npm install easy-icons
pnpm add easy-icons
yarn add easy-icons
bun add easy-icons
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.5 |
| Published | 2021-09-27 |
| First published | 2021-02-15 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 11 |
| Unpacked size | 187.1 KB |
| Known vulnerabilities | 0 (+3 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 6 |
| Author | ltaoo |
| Maintainers | ltaoo |
| Keywords | svg, icons, ant-design/icons |

## Links

- npm: https://www.npmjs.com/package/easy-icons
- Repository: https://github.com/ltaoo/easy-icons
- Homepage: https://ltaoo.github.io/easy-icons
- Issues: https://github.com/ltaoo/easy-icons/issues
- npm.io page: https://npm.io/package/easy-icons

## Dependencies (11)

- [cpy](https://npm.io/package/cpy.md) ^8.1.2
- [svgo](https://npm.io/package/svgo.md) ^1.3.2
- [chalk](https://npm.io/package/chalk.md) ^4.1.0
- [ramda](https://npm.io/package/ramda.md) ^0.27.0
- [yargs](https://npm.io/package/yargs.md) ^17.0.0-candidate.0
- [globby](https://npm.io/package/globby.md) ^11.0.0
- [insert-css](https://npm.io/package/insert-css.md) ^2.0.0
- [lodash.template](https://npm.io/package/lodash.template.md) ^4.5.0
- [lodash.camelcase](https://npm.io/package/lodash.camelcase.md) ^4.3.0
- [@rgrove/parse-xml](https://npm.io/package/@rgrove/parse-xml.md) ^2.0.2
- [lodash.upperfirst](https://npm.io/package/lodash.upperfirst.md) ^4.3.1

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 1.1.5 (latest) — 2021-09-27
- 1.1.4 — 2021-09-16
- 1.1.3 — 2021-09-15
- 1.1.2 — 2021-09-14
- 1.1.1 — 2021-09-14
- 1.1.0 — 2021-09-14
- 1.0.0 — 2021-09-05
- 0.2.12 — 2021-03-09
- 0.2.11 — 2021-03-05
- 0.2.10 — 2021-03-04
- 0.2.9 — 2021-03-04
- 0.2.7 — 2021-02-20
- 0.2.6 — 2021-02-19
- 0.2.5 — 2021-02-19
- 0.2.4 — 2021-02-19
- … 5 more at https://npm.io/package/easy-icons/versions

## README

# easy-icons

`easy-icons` 是一个能使用 `svg icon` 就像使用 `@ant-design/icons` 一样的工具。

> 本项目核心逻辑参考自 `@ant-design/icons`，将其改写为一个能在任意项目中使用的包。
> 核心逻辑就是将 `svg` 文件解析为 `js` 对象，并提供 `React` 组件可直接使用该 `js` 对象渲染图标。

本项目分几种使用方式

1. 将 svg 作为单个 npm 包发布后使用
2. 将 svg 作为多个 npm 包发布后使用（`@ant-design/icon` 就是如此，好处是多框架复用，不局限于 `react`)
3. 在项目中直接使用
4. 在 umi 项目中使用

下面详细说明各种使用方式

## 1、将 svg 作为单个 npm 包发布后使用

```bash
yarn create easy-icons ./my-icons
```

```bash
cd my-icons
yarn
```

将自己的 `svg` 图标按主题放入项目 `svg` 下的主题文件夹中。

```
- svg
  - filled 填充类型的图标
  - outlined 线性图标
  - twotone 颜色图标
```

执行命令 `npm publish` 即可发布到 `npm` 上。之后有新增 `svg icon` 也是直接 `npm publish` 发布即可。

## 2、将 svg 作为多个 npm 包发布后使用（todo）

在不同包中执行不同命令。

## 3、仅在项目中使用

> 必须是 `ts` 项目，否则还是建议发成 `npm` 包后使用。

和之前步骤类似，找一个目录存放 `svg`、`outlined` 等文件夹，以如下目录结构为例

```bash
- package.json
- src
  - svg
    - filled
    - outlined
  - icons
```

依次执行

```bash
yarn ei gen all --svg src/svg --output src/icons
```

然后在项目中引用即可。

```typescript
// src/App.tsx
const { SmileOutlined } from '@/icons';
```

## 4、在 umi 项目中使用

使用 `umi-plugin-icons` 插件即可。

## faq

### 新增一个 icon 要怎么做

目前没有增量新增或指定新增 `icon` 功能，每次都是全量处理，所以和初始化流程相同

```bash
yarn gen all --svg <svg-dir> --output <output-dir>
```

### 如何实现按需加载

使用 `babel-plugin-import` 插件，并配置

```js
 {
  libraryName: '@icons',
  libraryDirectory: 'icons',
  camel2DashComponentName: false,
},
```

## 原理说明

现在有一个 `svg` 图标，使用编辑器打开查看，它的的内容是这样的（省去了路径的一些信息，标签结构是这样的）

```xml
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024">
  <path d="M885.9 533.  .....     2.1-19.6 43z"/>
</svg>
```

将其作为字符串读取并使用 `SVGO` 解析、处理，偏向「清理」这种行为，对属性排序、移除不必要的属性等等。

```js
const svg = '<?xml version="1.0" ...>';
const optimizer = new SVGO({
  floatPrecision: 2,
  // 通过 plugins 来对内容进行修改，支持自定义 plugin
  plugins: [],
});
const { data } = await optimizer.optimize(svg);
```

处理得到的 `data` 还是字符串，但移除掉了一些无关信息，如 `class`、`fill` 等属性。

接下来就是重点，根据「清理」后的 `svg` 字符串，生成 `asn`，类似这样

```js
{
  "tag": "svg",
  "attrs": { "viewBox": "0 0 1024 1024", "focusable": "false" },
  "children": [
    {
      "tag": "path",
      "attrs": {
        "d": "..."
      }
    }
  ]
}
```

再生成一个 `asn.ts` 文件，里面会导出上述对象，这样一个文件就可以供组件调用。

```js
// React Icon component
import * as React from 'react';
import LikeOutlinedSvg from './asn/LikeOutlined.ts';
import AntdIcon, { AntdIconProps } from '../components/AntdIcon';

const LikeOutlined = (
  props: AntdIconProps,
  ref: React.ForwardedRef<HTMLSpanElement>,
) => <AntdIcon {...props} ref={ref} icon={LikeOutlinedSvg} />;

LikeOutlined.displayName = 'LikeOutlined';
export default React.forwardRef<HTMLSpanElement, AntdIconProps>(LikeOutlined);
```

这个组件可以直接在项目中使用。

当然，上面所有流程都会由本项目完成，用户只需要直接使用 `<LikeOutlined />` 即可在页面中渲染一个点赞按钮。

---
_Source: https://npm.io/package/easy-icons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._