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

Allenice

相对于字体图标,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 的方式。大家如果有更好的实现方案,欢迎讨论。

阅读 1.1k

javascript

2 声望
0 粉丝
0 条评论
你知道吗?

javascript

2 声望
0 粉丝
宣传栏