uniapp在web端怎么使用svg图标呢

  1. 在图标库中添加好项目用到的图标,点击symbol
  2. 点击生成在线链接
  3. 点击生成的在线链接,此时会跳转到一个新窗口,是一个js文件
  4. 复制这个js文件的内容
  5. 然后在uniapp中新建svg.js文件,把从上面复制的代码粘贴到这个svg.js中
  6. 在main.js中引入svg.js文件
javascript 复制代码
import Vue from 'vue';
import svg from '@/utils/svg.js';
Vue.use(svg);
  1. 在页面中使用
javascript 复制代码
<svg class="svg-icon">
	<use xlink:href="#icon-tubiao-zhinengwangguan"></use>
</svg>

其中的 icon-tubiao-zhinengwangguan 就是仓库中对应图标的名称

  1. 设置图标大小
css 复制代码
.svg-icon {
	width: 40px;
	height: 40px;
}

效果:

相关推荐
前端互助会3 小时前
Live2D形象展示与文本语音播报:打造生动交互体验的完整实现
前端·vue.js·microsoft·交互
游戏开发爱好者84 小时前
iOS IPA 上传工具全面解析,从 Transporter 到开心上架(Appuploader)命令行的高效上架实践
android·ios·小程序·https·uni-app·iphone·webview
努力的小郑5 小时前
今晚Cloudflare一哆嗦,我的加班计划全泡汤
前端·后端·程序员
武昌库里写JAVA5 小时前
微擎服务器配置要求,微擎云主机多少钱一年?
java·vue.js·spring boot·后端·sql
dy17176 小时前
el-table表头上下显示内容
javascript·vue.js·elementui
q***64976 小时前
头歌答案--爬虫实战
java·前端·爬虫
凌波粒6 小时前
SpringMVC基础教程(4)--Ajax/拦截器/文件上传和下载
java·前端·spring·ajax
液态不合群6 小时前
DDD驱动低代码开发:从业务流程到领域模型的全链路设计
前端·低代码·架构·ddd
jonyleek6 小时前
JVS低代码开发中,如何创建自定义前端页面并接入到现有系统中,从创建到接入的全攻略
前端·低代码·前端框架·软件开发
谢尔登7 小时前
【React】React组件的渲染过程分为哪几个阶段?
前端·javascript·react.js