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

效果:

相关推荐
yuanyxh14 小时前
macOS 应用 - 纯对话生成
前端·macos·ai编程
大家的林语冰14 小时前
ES5 凉凉,Babel 8 正式发布,默认不再编译为 ES5 和 CJS......
前端·javascript·前端工程化
光影少年16 小时前
react批量更新、同步/异步更新场景
前端·react.js·掘金·金石计划
假如让我当三天老蒯16 小时前
模块化:ES Module 与 CommonJS 的区别
前端·面试
用户409501157731716 小时前
Private Forge v2.0 发布:12大前端业务场景技能系统
前端
weedsfly17 小时前
异步编程全景与事件循环——彻底搞懂 JS 执行机制
前端·javascript
用户0595401744617 小时前
AI Agent记忆测试踩坑实录:Mock骗了我一周,Mem0+pytest一招破局
前端·css
用户17335980753717 小时前
纯前端 PDF 数字签名实战:Vue 3 + pdf-lib 在浏览器里完成签名嵌入
前端·javascript
IT_陈寒17 小时前
SpringBoot自动配置的坑,我爬了三天才出来
前端·人工智能·后端
Avan_菜菜1 天前
AI 能写代码了,为什么我反而开始要求它先写文档?
前端·github·ai编程