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

效果:

相关推荐
qq_120840937113 小时前
Three.js 模型加载稳定性实战:从资源失败到可用发布的工程化方案
前端·javascript·vue.js·vue3·three.js
skywalk816313 小时前
mock数据什么意思?前端应用mock
前端
weixin1997010801613 小时前
《闲鱼商品详情页前端性能优化实战》
前端·性能优化
qq_120840937113 小时前
Three.js 性能实战:大场景从 15FPS 到 60FPS 的工程化优化路径
开发语言·前端·javascript
Code-keys13 小时前
【gdb工具】 使用详细介绍
前端·chrome
guhy fighting14 小时前
使用vue-virtual-scroller导致打包报错
前端·javascript·vue.js·webpack
UXbot14 小时前
如何用 AI 生成产品原型:从需求描述到可交互界面的完整 5 步流程
前端·人工智能·ui·交互·ai编程
hbstream14 小时前
Hermes Agent 一周暴涨五万 Star,但我劝你别急着追
前端·人工智能
光影少年14 小时前
前端开发桌面端都有哪些框架?
前端·react.js·electron
Cecilialana14 小时前
同域名、同项目、仅 hash 变化,window.location.href 不跳转
前端·javascript