Vue3+Element Plus使用svg加载iconfont的解决方案

安装依赖

由于我们是Vue3项目,可以使用vite来快速创建一个Vu3项目:

npm install -g yarn
yarn create vite my-vue-app --template vue // 这里我们使用vue模板,默认是Javascript语法,如果需要ts语法则需要指定模板为vue-ts
cd my-vue-app
yarn
yarn dev 

创建好项目后,我们再来引入Element Plus,安装并引入的过程如下:

安装

yarn add element-plus 

完整引入

// main.js
...
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus) 

引入后,我们就可以在Vue3项目中使用了:

 

Element Plus使用Icon会比Element UI稍微麻烦点。首先我们需要安装Icon的依赖:

yarn add @element-plus/icons-vue 

我们在main.js中注册所有的图标,当然也可以按需引入图标:

// main.js
// 全局引入
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
...
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
} 

el-icon的使用:


 

Element Plus的el-icon使用的是svg,这与Element UI使用的类名有很大的不同,也就是说我们无法直接在el-icon中使用iconfont的图标。虽然Element Plus的图标已经能满足大部分场景的需求,但是一些特殊场景只能从iconfont或者自定义的图标上获取。

那么有没有办法将iconfont封装成svg,并给el-icon调用呢?

将iconfont封装成svg

可缩放矢量图形(Scalable Vector Graphics),简称SVG,是一种基于XML的,可用于描述二维的矢量图形。SVG可以优雅而简洁的渲染不同大小的图形,并且可以被无限缩放并且保持不失真或者降低质量,这一特性比JPEGPNG等好用太多。SVG的内容相当多,感兴趣的可以去MDN上查看文档:SVG。我们这里只是简单实用SVG来封装iconfont。

首先我们新建一个SvgIcon.vue的文件,



 

这样就将iconfont封装成了svg来调用了,这里我们重点说几个属性:

  • aria-hidden:默认为false,设置为true表示会把整个元素包括子元素从可访问树(AOM)上移除,但是在DOM树上还是存在的
  • xlink:hrefuse元素的属性
  • v-bind:Vue3的特性,可用于关联CSS和js
  • fill:如果在动画接收还需要保持动画的值,可用于设置颜色

如何使用

使用已经封装好的SvgIcon.vue比较简单,就和正常的组件一样使用即可。例如:



                    
                    

你可能感兴趣的:(vue.js,javascript,前端)