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

效果:

相关推荐
SchuylerEX2 分钟前
第六章 JavaScript 互操(3)JS调用.NET
前端·javascript·c#·.net·blazor
iOS阿玮4 分钟前
我终于把3年前在谷歌赚的广告费提现了!
uni-app·app·apple
默默地离开5 分钟前
从0到1掌握React+TypeScript开发:前端工程化实践指南
前端·react.js·typescript
Spider_Man6 分钟前
手指一拉,世界焕新:移动端下拉刷新全攻略
前端·javascript·react.js
恋猫de小郭8 分钟前
Flutter 里的 Layer 解析,带你了解不一样角度下的 Flutter 渲染逻辑
android·前端·flutter
1phoenix9 分钟前
JavaScript 实现自定义右键菜单
前端·javascript·css
迷你二鹏10 分钟前
前端之Git
前端·git
二闹24 分钟前
大厂前端研发岗位设计的30道Webpack面试题及解析
前端·面试
拾光拾趣录30 分钟前
实现 `this` 对象的深拷贝:从“循环引用崩溃”到生产级解决方案
前端·javascript
无羡仙31 分钟前
90%的人都在用的下拉刷新,我把它拆了!
前端·node.js