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

效果:

相关推荐
指尖跳动的光10 小时前
前端视角-如何保证系统稳定性
前端
麦麦大数据10 小时前
F064 vue+flask知识图谱在线学习系统
vue.js·flask·知识图谱·在线学习·学习系统·ai学伴·ai助学
fruge10 小时前
2025全栈技术深耕与实践:从框架融合到工程落地
前端
Hzsilvana10 小时前
踩坑日记:Uniapp项目定位偏差与依赖更新的真相
uni-app
秋42710 小时前
tomcat与web服务器
服务器·前端·tomcat
hdsoft_huge10 小时前
Java 实现高效查询海量 geometry 及 Protobuf 序列化与天地图前端分片加载
java·前端·状态模式
MoonBit月兔10 小时前
用 MoonBit 打造的 Luna UI:日本开发者 mizchi 的 Web Components 实践
前端·数据库·mysql·ui·缓存·wasm·moonbit
程序员修心10 小时前
CSS浮动与表格布局全解析
前端·html
登山人在路上10 小时前
Vuex构建可维护的 Vue.js 状态管理
vue.js
登山人在路上11 小时前
Pinia :下一代 Vue 状态管理
vue.js