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

效果:

相关推荐
万少1 小时前
万少的博客 - 技术分享与解决方案
前端·javascript·后端
尘世中一位迷途小书童4 小时前
用 Cesium 撸了一个森林火情监控大屏,弧线、粒子、发光效果都齐了
前端·javascript
IT_陈寒4 小时前
垃圾回收器选错了,我的Java服务内存炸了
前端·人工智能·后端
月光下的丝瓜5 小时前
Flutter 国内安装指南
前端·flutter
玄星啊5 小时前
AI 编程的第 30 天,我怀念古法 Coding 了
前端·ai编程
Jolyne_5 小时前
Angular基础速通
前端·angular.js
锋行天下6 小时前
半秒开!还有谁!!!
前端·vue.js·架构
代码搬运媛7 小时前
git 下中文文件名乱码问题解决
前端
CaffeinePro7 小时前
告别知识点零散!React零基础通关,从环境搭建到Ant Design页面实战
前端·react.js
cidy_987 小时前
水龙头领不到测试币?手把手用 Hardhat 本地环境零门槛学以太坊交易
前端