在 《基于 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="{