vue3 vite2 封装 SVG 图标组件 – 基于 vite 创建 vue3 全家桶项目续篇

《基于 vite 创建 vue3 全家桶》一文整合了 Element Plus,并将 Element Plus 中提供的图标进行全局注册,这样可以很方便的延续 Element UI 的风格 —— 通过 el-icon-xxx 的方式使用图标(如果有问题的朋友可以先阅读前面的文章:基于 Vite 创建 vue3 全家桶项目)。

在真实的企业级开发中,Element Plus 内置的图标通常很难满足业务需求,项目中需要引入大量的 SVG 图标资源,本文描述如何在 Vue3 + Vite2 环境中使用 SVG 图标,封装一个支持本地 SVG 图标和在线 SVG 图标的组件 svg-icon

文中实现的 svg-icon 组件会内置到 yyg-cli 脚手架中(通过 yyg 命令行创建的项目内置该组件),如果在此之前已经通过 yyg-cli 创建了项目,可以按照本文的步骤封装 SVG 图标组件 svg-icon

1 创建组件

src/components/ 目录下创建目录 svg-icon,该在目录中创建 svg-icon 组件 index.vue

1.1 输入属性

该组件需要两个输入属性(props):

  • icon:SVG 图标的名称或在线 URL
  • className:动态传递给该组件的样式类名

代码如下:

const props = defineProps({   // SVG 图标名称或在线URL   icon: {     type: String,     required: true   },   // 图标类名   className: {     type: String,     default: ''   } }) 

1.2 SVG 图标样式

style 中定义 svg-icon 的样式类:

.svg-icon {   width: 1em;   height: 1em;   fill: currentColor;   overflow: hidden; } 

2 在线 SVG 图标

svg-icon 组件需要支持在线 SVG 图标本地 SVG 图标。首先实现在线 SVG 图标的显示。如下 URL 为一个在线 SVG 图标,可在浏览器中直接访问:

http://www.yygnb.com/demo/car.svg 

2.1 判断在线图标

script 中通过计算属性判断 props 中的 icon 是否是在线图标:

const isOnlineSvg = computed(() => /^(https?:)/.test(props.icon)) 

该判断比较简单,如果 icon 属性以 http:https: 开头,则该图标为在线图标,其他情况均为本地的 SVG 图标。各位朋友可以根据自己项目情况添加或完善该判断逻辑。

2.2 模板和样式

在线 SVG 图标通过 HTML 元素 div 来显示,css3 有个 mask 属性,该属性表示遮罩,可以部分或者完全隐藏一个元素的可见区域,使用方式与 background 很类似。

template 如下:

<div v-if="isOnlineSvg"      :style="{ '--svg-icon-url': `url(${icon})` }"      class="svg-icon svg-icon-online"      :class="className"/> 

style 追加 svg-icon-online 样式类:

.svg-icon-online {   background-color: currentColor;   mask-image: var(--svg-icon-url);   -webkit-mask-image: var(--svg-icon-url);   mask-size: cover;   -webkit-mask-size: cover;   display: inline-block; } 

上面的 templatestyle 使用到 vue3 的新特性,演示了如何将一个 script 中的 props 属性传递给 scss“:

  1. 首先在模板中通过 style 属性定义了一个变量 --svg-icon-url,该变量的值为 props 中的 icon 属性。
  2. 在 scss 中设置 mask-image 时,使用 var 函数获取变量 --svg-icon-url 的值。

3.3 测试在线图标

about.vue 中引入 svg-icon

import SvgIcon from '@/components/svg-icon/index.vue' 

测试使用该组件:

<div>   <svg-icon class-name="icon" icon="http://www.yygnb.com/demo/car.svg"></svg-icon> </div> 

添加自定义样式:

.icon {   color: cornflowerblue;   font-size: 30px; } 

在浏览器中访问 about 页面,可以看到在线 SVG 图标可以成功显示:

vue3 vite2 封装 SVG 图标组件 - 基于 vite 创建 vue3 全家桶项目续篇

3 本地 SVG 图标

在 webpack 中加载 svg 资源可以使用 svg-sprite-loader,而 vite 中可以使用插件 vite-plugin-svg-icons

3.1 安装开发依赖

首先安装 vite-plugin-svg-icons 为开发依赖:

yarn add vite-plugin-svg-icons -D 

3.2 配置 vite

vite.config.ts 中配置该插件:

... import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' ...  export default defineConfig({ 	...   plugins: [     ...     createSvgIconsPlugin({       // 要缓存的图标文件夹       iconDirs: [path.resolve(__dirname, 'src/svg')],       // 执行 icon name 的格式       symbolId: 'icon-[name]'     })   ],   ... } 

通过 createSvgIconsPlugin() 入参指定了svg 文件所在的目录和 symbolId

3.3 修改 main.ts

main.ts 中添加如下语句:

import 'virtual:svg-icons-register' 

3.4 完成 svg-icon 组件

通过上述步骤,便完成了 vite-plugin-svg-icons 的配置,接下来实现 svg-icon 组件即可。前面已经完成了在线 svg、样式等,现在只需要在 template 中补充本地 svg 的代码即可:

<svg v-else      class="svg-icon"      :class="className"      aria-hidden="true">   <use :xlink:href="`#icon-${icon}`"/> </svg> 

组件 components/svg-icon/index.vue 完整代码如下:

<template>   <div v-if="isOnlineSvg"        :style="{ '--svg-icon-url': `url(${icon})` }"        class="svg-icon svg-icon-online"        :class="className"/>   <svg v-else        class="svg-icon"        :class="className"        aria-hidden="true">     <use :xlink:href="`#icon-${icon}`"/>   </svg> </template>  <script lang="ts" setup> import { computed } from 'vue'  const props = defineProps({   // SVG 图标名称或在线URL   icon: {     type: String,     required: true   },   // 图标类名   className: {     type: String,     default: ''   } })  const isOnlineSvg = computed(() => /^(https?:)/.test(props.icon)) </script>  <style scoped lang="scss"> .svg-icon {   width: 1em;   height: 1em;   fill: currentColor;   overflow: hidden; }  .svg-icon-online {   background-color: currentColor;   mask-image: var(--svg-icon-url);   -webkit-mask-image: var(--svg-icon-url);   mask-size: cover;   -webkit-mask-size: cover;   display: inline-block; } </style> 

3.5 测试本地图标

由于 vite.config.ts 中配置的 svg 目录为 src/svg,首先将 car.svg 拷贝到该目录下。继续在 about.vue 中添加如下代码:

<div>   <svg-icon icon="http://www.yygnb.com/demo/car.svg"></svg-icon>   <svg-icon icon="car"></svg-icon>    <svg-icon class-name="icon" icon="http://www.yygnb.com/demo/car.svg"></svg-icon>   <svg-icon class-name="icon" icon="car"></svg-icon> </div> 

上面的代码分别显示在线图标和本地图标,页面显示结果如下:

vue3 vite2 封装 SVG 图标组件 - 基于 vite 创建 vue3 全家桶项目续篇

可以看出在线图标、本地图标、自定义样式类都可以正常显示,这样便完成了 svg-icon 的封装。

感谢你阅读本文,如果本文给了你一点点帮助或者启发,还请三连支持一下,点赞、关注、收藏,作者会持续与大家分享更多干货

发表评论

相关文章