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

效果:

相关推荐
卤蛋fg6几秒前
vue 甘特图 vxe-gantt 的使用(四):周视图的渲染
vue.js
政采云技术1 分钟前
Chrome 高阶调试技巧
前端
牧艺2 分钟前
HTML-in-Canvas 深度解析:让 Canvas 真正「吃上」HTML 这碗饭
前端·html·canvas
卤蛋fg63 分钟前
vue 甘特图 vxe-gantt 的使用(三):月视图的渲染
vue.js
秦瑜华7 分钟前
前端页面添加AI自动翻译按钮
前端·openai·ai编程
沉浸学习的匿名网友15 分钟前
什么是 .gitignore?为什么每个 Git 项目几乎都离不开它?
前端·git
Apifox35 分钟前
从 Postman 迁移到 Apifox:Workspace、Collection、Environment 现在可以一起导入了
前端·后端·程序员
cidy_982 小时前
Agent\-Reach 保姆级教程|AI Agent 全网数据源扩展工具(免费无调用费)
前端
乘风gg2 小时前
当 AI 遇到私有组件,Cli 才是 AI Coding 的起点
前端·ai编程·cursor
卤蛋fg62 小时前
vue 甘特图 vxe-gantt 的使用(一):年视图的渲染
vue.js