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

效果:

相关推荐
whinc几秒前
Node.js技术周刊 2026年第16周
前端·javascript
DyLatte3 分钟前
我做了个AI项目后才发现:会做事的人,正在输给会讲故事的人
前端·后端·程序员
深海鱼在掘金3 分钟前
从Claude Code泄露源码看工程架构:第三章 — CLI 启动链路的分流策略与按需加载机制
前端·人工智能·设计模式
踩着两条虫3 分钟前
VTJ:低代码平台原理
前端·低代码·ai编程
颜酱5 分钟前
提示词强化1:三个让大模型更「听话」的习惯
前端·javascript·人工智能
破茧成蝶8105 分钟前
修复播报缺失文字的bug,改为“播放单个 -> 等待结束 -> 延迟 10ms秒 -> 播放下一个”的递归/循环模式
前端
颜酱10 分钟前
提示词强化 2:元提示(Meta-Prompt)与动态提示词
前端·javascript·人工智能
fengci.11 分钟前
ctfshow其他(web408-web432)
android·开发语言·前端·学习·php
研☆香17 分钟前
es6的一些更新特点介绍
前端·ecmascript·es6
hlvy20 分钟前
Claude Code 太难看?我开源了一个 Web GUI
前端·ai·claude