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

效果:

相关推荐
执子念的飞鱼22 分钟前
File Viewer 进入 2K 节点后,我更在意这 3 条回归
前端·typescript
richdata23 分钟前
动态OTB vs 静态OTB:鞋服零售该选哪种管理模式?
前端·html·零售
Jodie同志26 分钟前
第16~23天:持久化、HITL、流式、MCP与安全
前端·后端·agent
Jodie同志30 分钟前
第1~15天:原生Agent、RAG与LangGraph基础(完整代码实操)
前端·后端·agent
sunly_32 分钟前
React useActionState 的用法详解
前端·javascript·react.js
今日无bug33 分钟前
RESTful + Interface:从 todos 项目理解后端接口设计
前端·restful
用户693717500138441 分钟前
#DeepSeek+Pi‑Agent 王炸组合跑赢 Claude‑Code!
前端·人工智能·后端
前端一课1 小时前
我还在上班,怎么做一个长期有价值的号
前端
前端一课1 小时前
用 TRAE Work 把项目踩坑经验沉淀成「团队可复用工程规范」,新人再也不重复掉坑
前端·后端
cyadyx1 小时前
【Three.js】Three.js 中加载 3D 模型
前端·javascript·3d