Element-UI 如何设置和使用第三方svg菜单图标

2024-04-21 21:22:01

目录

1.简介：

2.svg-icon的工作原理：

3.如何使用？

1.简介：

（1） .svg是一种通过代码的方式来展示的图片格式。

（2）学习网站：https://www.runoob.com/svg/svg-tutorial.html

（3）查找更多.svg图片地址：https://www.iconfont.cn/

找到图标后，可以下载或者直接复制代码

2.svg-icon的工作原理：

（1）目标

理解svg-icon组件的工作原理；如何把它用到新项目中？

（2）要点：

<1>svg-icon是一个全局组件，在src/icons/index.js中定义并注册成立全局组件。

<2>在main.js中引入了。

<3>它额外需要svg-sprite-loader@4.1.3的配合，及对应的vue.config.js中的配置。

<4>它的使用格式<svg-icon icon-class="文件名"/> 。这里的文件名就是在src/icons/svg 下的文件名

3.如何使用？

（1）新建.svg文件

在src/icons/svg下，建立一个名为qq.svg的文件（文件名是可以任意取的），并把上一步中复制的代码粘过来。

<svg-icon icon-class="qq" />

(2) 安装依赖

`npm i svg-sprite-loader@4.1.3 `

(3) 配置 vue.config.js

const path = require('path')
function resolve (dir) {return path.join(__dirname, dir)
}

(4) 补充一个配置

{// 省略其他...chainWebpack (config) {// set svg-sprite-loaderconfig.module.rule('svg').exclude.add(resolve('src/icons')).end()config.module.rule('icons').test(/\.svg$/).include.add(resolve('src/icons')).end().use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]'}).end()}
}

（5）使用

使用格式<svg-icon icon-class="文件名"/> 。这里的文件名就是在src/icons/svg下的文件名

Element-UI 如何设置和使用第三方svg菜单图标相关推荐

为element ui+Vue搭建的后台管理项目添加图标
问题:使用element UI 及Vue 2.0搭建一个后台管理项目,想要在页面中为其添加对勾及叉的图标. 解决方案:问题涉及到为页面添加图标.有两种解决方案. (1)Element官网提供了Icon ...
自定义Element ui中el-upload上传后的文件图标
实现功能:上传图标显示图片图标,上传文件显示文档图标,上传视频显示视频图标首先想到的是去Element UI 查看有没有自定义的功能,后面发现底层源码写死的,那就不能自定义,就只能通过js操作了,我 ...
在Vue+Element ui 项目中如何使用iconfont（阿里图标库）中的图标
在项目过程中,element ui 中自带的图标往往满足不了自己的需求,那么如何在项目中使用iconfont的图标呢? 在iconfont中新建一个项目找到自己想要的图标,加入购物车,加入完成后点击 ...
element ui select设置不显示不存在的项_appium—等待时间设置方法
引言: 在做UI自动化的过程中,我们有时候为了等待元素的出现,需要加一些等待时间来帮助,但是有时候时间加的过多或者过少,这个没有办法判断,今天就介绍几种等待时间,我们看看那种适合我们一.强制等待看 ...
设置element ui table表格线条颜色以及设置圆角/解决element ui table设置圆角后线条不显示或显示模糊问题，亲测有效
问题描述 table表格设置为圆角后并且设置table border颜色,设置圆角后导致修改颜色后的border无法显示问题解决 /* 设置圆角以及边框颜色 */.el-table{border-r ...
【2】Vue项目引用Element UI（饿了么框架）菜单导航条初期配置
首先要理解Vue项目加载顺序: index.html → main.js → App.vue → nav.json→ routes.js → page1.vue index.html建议加入样式 &l ...
Element ui 中的tree 在数据前面添加自定义图标
可以使用 el-tree 标签实现在节点区添加按钮或图标等内容也可以通过class来自定义图标 <template><div class="my-tree-main&q ...
svg菜单图标和关闭图标动态切换
下面的代码是网站第一个例子 svg动画 <!DOCTYPE html> <html><head><meta charset="utf-8" ...
Vue + Bootstrap|Element UI——模态框被遮罩层遮盖问题解决方案
问题描述问题分析 1)若dialog弹出框,它的遮罩层就会被插入到body标签下(即与组件所在的最外层div同一层级) Element UI中设置了modal-append-to-body='tru ...

最新文章

热门文章