当前位置： 首页 > article >正文

vue3+vite项目中使用阿里图标库(svg)图标

article 2024/11/13 15:59:31

前端项目中有很多地方会用到小图标，阿里的 iconfont 是一个不错的选择，同时， 它上面的 svg 矢量图标占用资源更少加载更快是一个不错的选择， 下面我们就来说一说，项目中如何来使用 svg 图标

安装插件 vite-plugin-svg-icons

npm install vite-plugin-svg-icons -D

在这里插入图片描述

vite.config.js 中配置

在这里插入图片描述

main.js 中引入svg-icons 组件

在这里插入图片描述

以上我们就成功的引入并配置了 svg 图标组件

使用阿里 svg 图标

首先，登录阿里的 iconfont 选择合适的图标文件
在这里插入图片描述

在 src/assets/icons 文件夹中 新建文件 phone.svg

在这里插入图片描述
一个svg 图标就下载好了

vue 文件中使用

在这里插入图片描述
以上就是在vue中使用 svg 图标的配置了


http://www.kler.cn/a/306660.html

相关文章：

  • node.js安装和配置教程
  • 零基础玩转IPC之——海思平台实现P2P远程传输实验（基于TUTK，国科君正全志海思通用）
  • C++数据结构算法学习
  • PCL 点云分割 基于CPC算法的分割
  • 索引【MySQL】
  • 将 Docker 镜像保存到本地文件系统中
  • NX CAM二次开发-创建程序组
  • Linux套接字
  • Python Web 开发中的性能优化策略（一）
  • Java多线程面试精讲：源于技术书籍的深度解读
  • uniapp+vue3 使用canvas，并保存图片（图片是空白的问题）
  • PMP–一、二、三模–分类–14.敏捷–技巧–项目生命周期
  • LINUX网络编程:http
  • HSmartWindowControl 滚轮缩放 交互式绘制ROI 可修改 存储
  • 初写MySQL四张表:(2/4)
  • 切换淘宝最新npm镜像源
  • Android应用性能优化
  • 抚琴成一快-音程和度数
  • 证券api接口，一个开源Python量化交易平台项目需要考虑哪些方面
  • [JVM]JVM内存划分, 类加载过程, 双亲委派模型,垃圾回收机制
  • 学习笔记JVM篇（一）
  • C语言中的信号量应用
  • 【ArcGIS Pro实操第七期】栅格数据合并、裁剪及统计：以全球不透水面积为例
  • Linux03
  • 使用 Nmap 进行 SSL/TLS 加密套件枚举
  • 什么是上拉，下拉？