在React, Vue2.x, Vue3.x 项目中使用 SVG 图标

相对于字体图标，SVG 使用更加灵活，所以现在越来越多的项目倾向使用 SVG 图标。之前我们发布过 vue-svgicon, 是针对 Vue 2.x 的一个图标生成工具和一个显示 inline SVG 图标的组件。目前 vue-svgicon 在 npm 的周下载量平均有 2.5w+，这样看 vue-svgicon 感觉还不错，但是其有以下几个缺点：

• 需要预先将 svg 文件 build 成 js/ts 模块，并注册到全局之后才能使用
• 不能按需加载，所有图标都会打包到主文件中，即使图标已经不再使用，导致主包体积过大
• 只支持 vue

针对以上缺点，我们就对 vue-svgicon 进行了重构(重写？)，并将项目的名称由 vue-svgicon 改名为 svgicon, 表示并不只支持 Vue。重构的思路是将功能拆分成多个 npm 包，使用起来更加灵活，项目的定位变成 SVG 图标工具集。

特性

• 支持多种框架，默认提供 Vue 2.x, Vue 3.x, React >= 16.8 的图标组件, 可以通过 @yzfe/svgicon 来编写支持其他框架的组件
• 按需加载，通过 webpack loader (@yzfe/svgicon-loader) 加载 SVG 文件变成图标数据或者图标组件，可以自定义生成的代码。
• 多功能，支持多颜色，包括渐变；支持同时设置填充和描边；支持原始色，并可以只修改某个颜色的值；支持缩放，动画等功能；
• 图标预览，在任意文件夹，使用 @yzfe/svgicon-viewer 查看 SVG 图标效果

npm 包

• @yzfe/svgicon 根据传入的参数(props)生成 SVG 图标组件需要的数据
• @yzfe/vue-svgicon 适用于 vue2.x 的 SVG 图标组件
• @yzfe/vue3-svgicon 适用于 vue3.x 的 SVG 图标组件
• @yzfe/react-svgicon 适用于 react 的 SVG 图标组件
• @yzfe/svgicon-gen 根据 SVG 文件内容，生成图标数据（图标名称和处理过的 SVG 内容）
• @yzfe/svgicon-loader 将 SVG 文件加载成图标数据(vue)或者 SVG 图标组件(react), 可以自定义生成的代码
• @yzfe/svgicon-viewer 预览 SVG 图标
• @yzfe/vue-cli-plugin-svgicon vue-cli 插件，可以快速的配置 svgicon
• @yzfe/svgicon-polyfill SVG innerHTML 兼容（IE）

快速上手(VUE)

安装

使用 vue-cli 插件 (推荐)

# 将会提示你填写 SVG 文件路径，全局注册的组件标签名称和 vue 的版本
vue add @yzfe/svgicon

如果已经安装了 @yzfe/vue-cli-plugin-svgicon, 但是没有调用到这个插件，你可以手动调用。

vue invoke @yzfe/svgicon

使用

<template>
    <div>
        <icon :data="arrowData" />
    </div>
</template>
<script>
import arrowData from 'svgfilepath/arrow.svg'
export default {
    data() {
        return: {
            arrowData
        }
    }
}
</script>

如果配置了 transformAssetUrls, 可以直接使用 svg 文件路径. 建议也配置 svg 文件路径的别名。

<template>
    <div>
        <!-- 这里假设配置了svg 文件路径的别名 @icon  -->
        <icon data="@icon/arrow.svg" />
    </div>
</template>

文档

更详细的内容请看文档：https://mmf-fe.github.io/svgi...

小程序

后面会支持微信小程序，支付宝小程序。如果你已经等不及，可以自行使用 @yzfe/svgicon 封装小程序的图标组件。小程序支持 SVG 图标的思路目前想到的是使用 svg 作为背景图片，使用 inline style 的方式。大家如果有更好的实现方案，欢迎讨论。