uniapp在web端怎么使用svg图标呢

  1. 在图标库中添加好项目用到的图标,点击symbol
  2. 点击生成在线链接
    在这里插入图片描述
  3. 点击生成的在线链接,此时会跳转到一个新窗口,是一个js文件
    在这里插入图片描述
  4. 复制这个js文件的内容
    在这里插入图片描述
  5. 然后在uniapp中新建svg.js文件,把从上面复制的代码粘贴到这个svg.js中
    在这里插入图片描述
  6. 在main.js中引入svg.js文件
import Vue from 'vue';
import svg from '@/utils/svg.js';
Vue.use(svg);
  1. 在页面中使用
<svg class="svg-icon"><use xlink:href="#icon-tubiao-zhinengwangguan"></use>
</svg>

其中的 icon-tubiao-zhinengwangguan 就是仓库中对应图标的名称
在这里插入图片描述
9. 设置图标大小

.svg-icon {width: 40px;height: 40px;
}

效果:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/339144.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

楼宇管理新智慧:Panorama SCADA楼宇管理系统应用实例

一、背景介绍 楼宇管理系统旨在集中控制和监测楼宇运营&#xff0c;涵盖暖通空调&#xff08;HVAC&#xff09;、照明、电力系统、消防和安全系统等。通过直观的用户界面&#xff0c;用户得以实时监测和精准掌控这些系统&#xff0c;从而提升能源效率、确保设备正常运行&#…

哪种小型洗衣机好用?高性价比的小型洗衣机推荐

大型洗衣机作为家居必备小家电&#xff0c;对生活品质的提升十分显著&#xff0c;在很多人的认知中&#xff0c;这种大型洗衣机主要是用来清洁大件的衣服和外套的&#xff0c;不方便将内衣裤都放入到里面&#xff0c;内衣裤的材质和尺寸都是比较特殊&#xff0c;若是直接将其放…

高通rb5的fastboot设备识别不了及驱动安装问题

Android fastboot驱动无法安装和识别问题-CSDN博客 以上为转载出处。

计算机组成原理之计算机硬件发展和计算机系统的组成

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…

企业微信forMAC,如何左右翻动预览图片

1、control commandshifd 进入企业微信的debug调试模式 2、按照如下步骤选择 3、重启企业微信

大语言模型面试问题

自己在看面经中遇到的一些面试题&#xff0c;结合自己和理解进行了一下整理。 transformer中求和与归一化中“求和”是什么意思&#xff1f; 求和的意思就是残差层求和&#xff0c;原本的等式为y H(x)转化为y x H(x)&#xff0c;这样做的目的是防止网络层数的加深而造成的梯…

基于JavaWeb+BS架构+SpringBoot+Vue协同过滤算法的体育商品推荐系统的设计和实现

基于JavaWebBS架构SpringBootVue协同过滤算法的体育商品推荐系统的设计和实现 文末获取源码Lun文目录前言主要技术系统设计功能截图订阅经典源码专栏Java项目精品实战案例《500套》 源码获取 文末获取源码 Lun文目录 1 绪 论 1 1.1项目背景 1 1.2研究意义 2 1.3设计目的 2 1.…

力扣刷题--设计链表707

这个题目的难点&#xff1a; 确定index是什么&#xff0c;index的范围向后遍历的次数&#xff0c;也就是循环的次数在某处添加或者删除一个结点&#xff0c;需要找到它的前一个结点 单链表 首先对于创建一个链表&#xff0c;需要单链表结构 public class ListNode {int val;…

Visual Studio 新特性:对 include 指令进行智能诊断

今天&#xff0c;我们很高兴地宣布新功能&#xff1a;#include 语言智能诊断。 此功能自 Visual Studio 2022 v17.9 预览版2 中可用。通过此新功能&#xff0c;您可以获取到有关每个 include 的引用和生成时间的详细信息&#xff0c;从而更好地了解 #include 指令的行为。 &g…

高德地图实现点聚合,使用 AMap.MarkerCluster 插件

高德地图实现点聚合&#xff0c;使用 AMap.MarkerCluster 插件 你需要具备的知识 会使用高德地图进行点的绘制了解高德地图的插件引入操作一些关于地图的基础操作 如果你没有具备这些&#xff0c;可以看我以往关于地图的相关文章了解个大概 一、点聚合是什么东西 当在地图…

postman 之 接口请求

一、前言 1. 安装 2. 主界面 3. 请求区域 Body下主要包含以下4中格式 form-data&#xff1a;混合表单&#xff0c;支持上传文件x-www-form-urlencoded&#xff1a;文本表单raw&#xff1a;原始格式&#xff0c;支持JSON/XML格式&#xff08;后面可选择&#xff09;binary&am…

前端开发Docker了解

1&#xff0c;docker简介 docker主要解决了最初软件开发环境配置的困难&#xff0c;完善了虚拟机部署的资源占用多&#xff0c;启动慢等缺点&#xff0c;保证了一致的运行环境&#xff0c;可以更轻松的维护和扩展。docker在linux容器的基础上进行了进一步的封装&#xff0c;提…