@td-design/svgicon-cli

本工具是基于react-native-iconfont-cli的基础上修改而来。因为 UI 设计师使用Figma产出设计稿,所以项目中用到的图标不会使用 iconfont 或者图片,而是直接导出 svg 格式。借助这个工具,就可以很方便地把本地 svg 转成图标组件在项目中使用。为此,精简了原项目中很多不需要的功能(比如拉取 iconfont 图标库、支持导出 js 文件等),以满足我们自己的需求。

Usage no npm install needed!

<script type="module">
  import tdDesignSvgiconCli from 'https://cdn.skypack.dev/@td-design/svgicon-cli';
</script>

README

@td-design/svgicon-cli

本工具是基于react-native-iconfont-cli的基础上修改而来。因为 UI 设计师使用Figma产出设计稿,所以项目中用到的图标不会使用 iconfont 或者图片,而是直接导出 svg 格式。借助这个工具,就可以很方便地把本地 svg 转成图标组件在项目中使用。为此,精简了原项目中很多不需要的功能(比如拉取 iconfont 图标库、支持导出 js 文件等),以满足我们自己的需求。

特性

1、纯组件,不依赖字体,体积小
2、支持渲染多色彩图标,支持自定义颜色
3、支持热更新
4、自动化生成图标组件,默认支持 typescript

Step 1

安装插件

# Yarn
yarn add react-native-svg
yarn add @td-design/svgicon-cli --dev

# Npm
npm install react-native-svg
npm install @td-design/svgicon-cli --save-dev

Step 2

生成配置文件

npx svgicon-init

此时项目根目录会生成一个svgicon.json的文件,内容如下:

{
  "save_dir": "", // 生成图标文件的保存位置,推荐 ./src/components/iconfont
  "trim_icon_prefix": "icon", // 图标文件的统一前缀
  "default_icon_size": 20, // 图标文件的默认大小
  "icon_svg": "./icon-svg", // 图标文件的存放位置
  "for_library": false // 是否为组件库生成图标,默认是false,表示是为项目生成图标
}

Step 3

开始生成 React-Native 标准组件

npx svgicon-create

使用

import { SvgIcon } from 'components';

export const App = () => {
  return (
    <View>
      <SvgIcon name="alipay" size={20} />
      <SvgIcon name="wechat" />
    </View>
  );
};

图标尺寸

根据配置default_icon_size,每个图标都会有一个默认的尺寸,你可以随时覆盖。

<SvgIcon name="alipay" size={20} />

图标单色

单色图标,如果不指定颜色值,图标将渲染原本的颜色。如果你想设置为其他的颜色,那么设置一个你想要的颜色即可。

注意:如果你在 props 传入的 color 是字符串而不是数组,那么即使原本是多色彩的图标,也会变成单色图标。

<SvgIcon name="alipay" color="green" />

图标多色彩

多色彩的图标,如果不指定颜色值,图标将渲染原本的多色彩。如果你想设置为其他的颜色,那么设置一组你想要的颜色即可

<IconFont name="alipay" color={['green', 'orange']} />

颜色组的数量以及排序,需要根据当前图标的信息来确定。您需要进入图标组件中查看并得出结论。

更新图标

icon_svg文件夹下的 svg 文件发生变化时,只需要重新执行下面的命令即可生成最新的图标组件

npx svgicon-rn