weapp-svg

像使用普通react组件一样使用iconfont图标
灵感来源: taro-iconfont-cli taro-iconfont-svg

⚠️ 目前仅支持生成taro的react tsx组件

为什么又造一个轮子

其他项目生成方式是将所有图标生成到一个文件中, 然后通过<IconFont name="xxx" />的方式来使用, 而本项目为每一个图标单独生成一个组件, 如下:

./iconfont
├── icons
│   ├── home.tsx
│   ├── user.tsx
│   ├── shop.tsx
│   ├── ......
├── index.ts
└── utils.ts

然后我们就可以直接import单独的图标来使用了:

import { IconHome } from 'path/to/icon';

const Page = () => {
  return <IconHome />;
};

由于每个图标为一个单独的组件, 你可以方便地复制一个或多个图标到任意项目.
甚至可以创建一个图标库供多个项目使用, 不用担心与本地项目图标调用方式冲突:

import { IconHome, IconTag } from '@my-package/icon';
import { IconBusiness, IconProject } from 'path/to/icon';

其他优点还包括:

1. 按需打包, 节省体积
2. 编译时报错, 如果图标删了, 直接import无法编译通过
3. 方便共享

安装

⚠️ 下文中涉及npm操作均使用@antfu/ni命令替代.

ni @wesvg/cli -D
wesvg generate

示例

查看examples目录寻找相关项目示例.

使用

Step1

生成配置:

na wesvg init

此时项目根目录会生成一个wesvg.json的文件，内容如下：

{
  "inputs": "",
  "output": "",
  "iconTrimPrefix": "",
  "iconSize": "",
  "iconComponentPrefix": ""
}

可以查看demo了解各个配置的用法.

Step2

生成组件:

na wesvg generate

wesvg generate也可以传入wesvg.json中的配置, 并且命令行配置会覆盖wesvg.json中的配置, 例如:

na wesvg generate --inputs ./iconfont --output ./src/components/icons --icon-trim-prefix icon --icon-size 16

TODO

1. 使用svgo优化图标