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;
}

效果:

相关推荐
apollo_qwe5 分钟前
深入解析Vue的mixins与hooks:复用逻辑的两种核心方式
vue.js
JunjunZ8 分钟前
uniapp 文件预览:从文件流到多格式预览的完整实现
前端·uni-app
_Eleven10 分钟前
React 19 深度解析:Actions 与 use API 源码揭秘
前端
_AaronWong40 分钟前
Vue3+Element Plus 通用表格组件封装与使用实践
前端·javascript·vue.js
前端西瓜哥40 分钟前
图形编辑器开发:文字排版如何实现自动换行?
前端
全栈老石1 小时前
手写一个无限画布 #3:如何在Canvas 层上建立事件体系
前端·javascript·canvas
晴殇i1 小时前
BroadcastChannel:浏览器原生跨标签页通信
前端·面试
DeathGhost1 小时前
分享URL地址到微信朋友圈没有缩略图?
前端·html
MrBread1 小时前
微任务链式派生阻塞渲染
前端·debug
wuhen_n1 小时前
patch算法:新旧节点的比对与更新
前端·javascript·vue.js