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

效果:

相关推荐
紫禁玄科8 小时前
Shai-Hulud:npm生态的自我复制蠕虫风暴
前端·npm·node.js
东风破_8 小时前
后端API没写好,前端难道干等着吗?
前端
百变梦仔8 小时前
从读项目到纠偏交付:我把 Codex 前端任务闭环升级成了第二版
前端
用户938515635078 小时前
从前后端分离到前端接口工程:React + MockJS + Vite 解析
前端·后端·全栈
用户938515635078 小时前
从零在浏览器里跑 DeepSeek-R1:WebGPU + Transformers.js 全链路实战(三)
前端·react.js·typescript
excel9 小时前
当前端行情变差,我们为什么还要坚持?
前端
鸿是江边鸟,曾是心上人9 小时前
快速搭建HTTPS本地开发环境
前端
To_OC10 小时前
写了 5 个表单 Demo 后,我终于彻底搞懂了 React 受控与非受控组件
前端·react.js·前端框架
Sterting10 小时前
第9课 Vue Router 路由
前端·vue.js
用户0595401744610 小时前
LangChain Memory 测试踩坑实录:用 pytest 自动化回归对话记忆,我折腾了整整一个周末
前端·css