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

效果:

相关推荐
Cobyte10 小时前
如何使用飞书机器人连接本地 AI Agent
前端·aigc·ai编程
starsky7623810 小时前
深入理解 Web 容器:从反射扫描到服务器启动的完整实现
java·前端·tomcat
拆房老料10 小时前
从 Euro-Office 说起:Office 不是编辑器,是一套复杂系统工程
前端·编辑器·开源软件·开源协议
就叫飞六吧10 小时前
jsplumb 审批流前端库案例
前端
踩着两条虫10 小时前
从“降门槛”到“提效率”:VTJ.PRO与百度秒哒的差异化路径分析
前端·vue.js·ai编程
一名优秀的码农10 小时前
vulhub系列-59-Web-Machine-N72(超详细)
前端·安全·web安全·网络安全·网络攻击模型·安全威胁分析
色空大师10 小时前
网站搭建实操(十)前端搭建
前端·webpack·vue·网站·论坛
ApjRvH3vg10 小时前
什么是Skills
前端
꧁꫞꯭零꯭点꯭꫞꧂10 小时前
JavaScript模块化规范
开发语言·前端·javascript
三万棵雪松10 小时前
【Linux 物联网网关主控系统-Web部分(四)】
linux·前端·物联网·嵌入式linux