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

效果:

相关推荐
小小小米粒4 分钟前
不是在构造方法「之前」修饰 Bean、注入;是构造方法跑完之后,才做属性注入,再跑 @PostConstruct。
前端
小李科技27 分钟前
【性能优化】事件委托:目标定位与 React/Vue 实战
前端·vue.js·react.js·面试·性能优化·前端框架
QianhangQianping34 分钟前
一块大屏的数据在浏览器里怎么变成画面:背景、子屏、前景三层结构
前端·低代码·架构·编辑器·数据可视化·大屏可视化
梦想很大很大1 小时前
让 Codex 自由发挥,给 nvm-desktop 换个 UI
前端·人工智能·设计
蓝莓味的口香糖1 小时前
【VUE】【CSS】Vue移动端适配主流方案总结
前端·css·vue.js
shennv8881 小时前
接入大模型流式输出后,文字偶尔乱码?问题可能出在前端
前端
csj501 小时前
前端基础之《React(16)—Modal组件封装》
前端·react.js
雨季mo浅忆1 小时前
Vue关于前端XSS漏洞修复方案
前端·xss
切糕师学AI1 小时前
el-select-v2 深度解析:用虚拟滚动解决海量数据下拉选择性能瓶颈
前端·vue.js·elementui·el-select-v2
徐小夕1 小时前
JitOffice:把办公、AI 与审批装进同一个平台
前端·vue.js·github