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

效果:

相关推荐
AC赳赳老秦11 分钟前
农业智能化:DeepSeek赋能土壤与气象数据分析,精准预测病虫害,守护丰收希望
java·前端·mongodb·elasticsearch·html·memcache·deepseek
囊中之锥.16 分钟前
《HTML 网页构造指南:从基础结构到实用标签》
前端·html
饼饼饼16 分钟前
从 0 到 1:前端 CI/CD 实战(第二篇:用Docker 部署 GitLab)
前端·自动化运维
qq_4061761417 分钟前
JavaScript的同步与异步
前端·网络·tcp/ip·ajax·okhttp
beckyyy24 分钟前
ant design vue Table根据数据合并单元格
前端·ant design
用户81686947472526 分钟前
Commit 阶段的 3 个子阶段与副作用执行全解析
前端·react.js
岭子笑笑26 分钟前
Vant4图片懒加载源码解析(一)
前端
老华带你飞29 分钟前
婚纱摄影网站|基于java + vue婚纱摄影网站系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot
Rysxt_33 分钟前
UniApp App.vue 文件完整教程
开发语言·前端·javascript
qiyue7737 分钟前
AI浪潮下,前端的路在何方,附前端转KMP实践
前端·ai编程