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

效果:

相关推荐
爱上妖精的尾巴2 分钟前
7-9 WPS JS宏 对象使用实例6:按条件读取多表再拆成多表
前端·javascript·wps·jsa
有意义3 分钟前
现代 React 路由实践指南
前端·vue.js·react.js
三木檾3 分钟前
Cookie 原理详解:Domain / Path / SameSite 一步错,生产环境直接翻车
前端·浏览器
开始学java4 分钟前
踩坑实录:把 useRef 写进 JSX 后,我终于分清它和 useState 的核心差异
前端
二DUAN帝4 分钟前
像素流与UE通信
前端·javascript·css·ue5·html·ue4·html5
1024小神4 分钟前
cloudflare+hono框架实现jwtToken认证,并从token中拿到认证信息
前端
jinmo_C++6 分钟前
从零开始学前端 · HTML 基础篇(二):常用文本标签与排版基础
前端·html
2501_9447114311 分钟前
A2UI : 以动态 UI 代替 LLM 文本输出的方案
开发语言·前端·ui
iOS阿玮23 分钟前
死了么 - 官方正版惨遭下架,背后原因竟是ta!
uni-app·app·apple
生活在一步步变好i28 分钟前
前端加载优化核心知识点详解
前端