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

效果:

相关推荐
humcomm9 小时前
元框架的工作原理详解
前端·前端框架
canonical_entropy9 小时前
Attractor Before Harness: AI 大规模开发的方法论
前端·aigc·ai编程
zhangxingchao10 小时前
多 Agent 架构到底怎么选?从 Claude Agent Teams、Cognition/Devin 到工程落地原则
前端·人工智能·后端
IT_陈寒10 小时前
SpringBoot那个自动配置的坑,害我排查到凌晨三点
前端·人工智能·后端
Honor丶Onlyou10 小时前
VS Code 右键菜单修复记录
前端
PILIPALAPENG10 小时前
Python 语法速成指南:前端开发者视角(JS 类比版)
前端·人工智能·python
JYeontu10 小时前
轮播图不够惊艳?试下这个立体卡片轮播图
前端·javascript·css
张就是我10659210 小时前
从前端角度理解 CVE-2026-31431
前端
AGoodrMe10 小时前
swift基础之async/await
前端·ios
irving同学4623810 小时前
从零搭建生产级 RAG:Embedding、Chunking、Hybrid Search 与 Reranker
前端·后端