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

效果:

相关推荐
greenbbLV几秒前
积分兑换商城供应商挑选:避坑要点与靠谱选择解析
前端·小程序
a11177616 分钟前
3D 建筑编辑器 Pascal Editor THreeJS 开源
前端·3d·html
jason_yang19 分钟前
写给女儿的英语App
前端·人工智能
思码梁田27 分钟前
CSS 定位详解:从相对到固定,掌握网页布局的核心
前端·javascript·css
勇往直前plus30 分钟前
Vite :从双击 HTML 到现代前端开发
前端·html
muddjsv31 分钟前
CSS 高级选择器精讲:伪类、伪元素、逻辑伪类与选择器解耦规范
前端·css
HH‘HH33 分钟前
前端应用的离线暂停更新策略:原理、实现与最佳实践
开发语言·前端·php
软件开发技术深度爱好者38 分钟前
HTML5实现数学函数画图器
前端·javascript·html5
虚惊一场43 分钟前
撤销为什么只需要 pop:用事件重放实现离线台球计分
微信小程序·uni-app
牧艺44 分钟前
cos-design BubbleField:用 Canvas 做一个「会呼吸」的深海气泡场
前端·webgl·canvas