vue3中使用svg图标

安装依赖

npm i vite-plugin-svg-icons -D

vite.config.ts中添加配置

主要为指定svg图标存放路径以及命名方式

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path';// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),createSvgIconsPlugin({iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],symbolId: 'icon-[dir]-[name]',})]
})

在main.ts中引入插件(这一步如果引入报错说缺少依赖,那就npm安装一下那个依赖即可)

import 'virtual:svg-icons-register'

使用

xlink:href="#icon-vue"中的icon-vue表示图标的名称,如此处我使用的图标名称为vue就直接写#icon-vue即可,vue才是名称,前面一截#icon-是固定标识

fill:图标的颜色

在svg标签里面可以书写行内样式,如图标宽高等等

<svg style=""><use xlink:href="#icon-vue" fill="skyblue"></use></svg>

封装成组件使用

<script setup lang="ts">
import { } from 'vue'defineOptions({name:"SvgName"
})defineProps({prefix:{type:String,default:'#icon-'},name:{type:String,required:true},color:{type:String,default:''},width:{type:String,default:'15px'},height:{type:String,default:'15px'}
})</script>
<template><svg :style="{width,height}"><use :xlink:href="prefix + name" :fill="color"></use></svg>
</template><style scoped lang="scss">
</style>

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

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

相关文章

總結力學_3

參考: 陈曦<<力学讲义>>http://ithatron.phys.tsinghua.edu.cn/downloads/mechanics.pdf 10 非惯性系 10.1 匀加速平动非惯性系 10.2 定轴匀速转动非惯性系 可以更好刻劃總結力學_2的有心力運動、質點系的運動的工具! 11 线性系统 11.1 线性系统、11.2 受迫…

【深入理解Python中的装饰器】

文章目录 前言装饰器的基本概念带参数的装饰器类作为装饰器结论 前言 装饰器是Python中一个非常强大且灵活的特性&#xff0c;它允许程序员在不修改原函数代码的情况下&#xff0c;增加或修改函数的行为。装饰器本质上是一个接受函数作为参数并返回一个新函数的函数。本文将深…

点击登录按钮先检测输入框的规则检测(vue组合式)

<template><el-form :model"user" :rules"rules" ref"loginForm" label-width"auto" style"max-width: 600px"><el-form-item label"用户名" prop"name"><el-input v-model"…

【Linux-LCD 驱动】

Linux-LCD 驱动 ■ Framebuffer 简称 fb■ LCD 驱动程序编写■ 1、LCD 屏幕 IO 配置■ 2、LCD 屏幕参数节点信息修改■ 3、LCD 屏幕背光节点信息■ 4、使能 Linux logo 显示 ■ 设置 LCD 作为终端控制台■ 1、设置 uboot 中的 bootargs■ 2、修改/etc/inittab 文件 ■ LCD 背光…

ROS的noetic版本

设置 sources.list 执行下面命令&#xff0c;设置从清华源下载 ROS 软件包。 sudo sh -c echo "deb http://mirrors.tuna.tsinghua.edu.cn/ros/ubuntu/ $(lsb_release -sc) main" > /etc/apt/sources.list.d/ros-latest.list设置密钥 sudo apt-key adv --keyse…

鸿蒙知识点总结

1 Stage模型应用程序包结构 在开发态&#xff0c;一个应用包含一个或者多个Module&#xff0c;可以在DevEco Studio工程中创建一个或者多个Module。Module是HarmonyOS应用/服务的基本功能单元&#xff0c;包含了源代码、资源文件、第三方库及应用/服务配置文件&#xff0c;每一…

快速上手 HuggingFace

HuggingFace HuggingFace 是类似于 GitHub 的社区&#xff0c;它主要提供各种的模型的使用&#xff0c;和 github 不同的是&#xff0c;HuggingFace 同时提供了一套框架&#xff0c;进行模型推理&#xff0c;模型训练、和模型库文件的管理等等。本文将介绍&#xff0c;如何快速…

【MySQL精通之路】全文搜索(9)-全文解析器-MeCab

主博客&#xff1a; 【MySQL精通之路】全文搜索功能-CSDN博客 目录 1.介绍 2.安装MeCab Parser插件 3.创建使用MeCab分析器的FULLTEXT索引 4.MeCab Parser空间处理 5.MeCab分析程序停止字处理 6.MeCab Parser术语搜索 7.MeCab分析程序通配符搜索 8.MeCab语法分析器短语…

echarts学习篇

一、使用echarts 1.引入 Apache ECharts <!DOCTYPE html> <html> <head> <meta charset"utf-8" /> <!-- 引入刚刚下载的 ECharts 文件 --> <script src"echarts.js"></script> </head> </html> 2.…

深度神经网络——什么是自动编码器?

自动编码器 自动编码器&#xff08;Autoencoders&#xff09;是无监督学习领域中一种重要的神经网络架构&#xff0c;它们主要用于数据压缩和特征学习。 自动编码器的定义&#xff1a; 自动编码器是一种无监督机器学习算法&#xff0c;它通过反向传播进行训练&#xff0c;目标…

【夏之以寒-Kafka专栏 02】什么情况下会发生 QueueFullException?

作者名称&#xff1a;夏之以寒 作者简介&#xff1a;专注于Java和大数据领域&#xff0c;致力于探索技术的边界&#xff0c;分享前沿的实践和洞见 文章专栏&#xff1a;夏之以寒-kafka专栏 专栏介绍&#xff1a;本专栏旨在以浅显易懂的方式介绍Kafka的基本概念、核心组件和使用…

2023山东ICPC省赛Problem B.建筑公司(拓扑排序)

2023 山东 I C P C 省赛 P r o b l e m B . 建筑公司 \Huge{2023山东ICPC省赛Problem B.建筑公司} 2023山东ICPC省赛ProblemB.建筑公司 文章目录 题意思路标程 比赛链接&#xff1a;Dashboard - The 13th Shandong ICPC Provincial Collegiate Programming Contest - Codeforce…

OWASP top10--SQL注入(三、手工注入)

目录 access数据库 手工注入过程&#xff1a; 猜解数据库表名 猜解数据库表名里面的字段 猜解字段内容 SQL注入中的高级查询 mssql数据库 手工注入过程&#xff1a; sa权限 ​编辑dbowner权限 public权限 mysql数据库 1、对服务器文件进行读写操作(前提条件) 需要知…

文刻创作ai工具官网免费工具

文刻创作ai工具官网免费工具 Docshttps://iimenvrieak.feishu.cn/docx/O0UedptjbonN4UxyEy7cPlZknYc 文刻是一种可以帮助用户进行创作的AI工具。 它使用自然语言处理和机器学习技术&#xff0c;可以生成文章、故事、诗歌等文本内容。 用户可以通过输入一些关键词或指定一定的…

浙江大学数据结构MOOC-课后习题-第七讲-图4 哈利·波特的考试

题目汇总 浙江大学数据结构MOOC-课后习题-拼题A-代码分享-2024 题目描述 代码展示 照着教程视频来的&#xff0c;没啥好说的捏 #include <cstdlib> #include <iostream>#define MAXSIZE 100 #define IFINITY 65535 typedef int vertex; typedef int weightType;/…

为什么大部分新手做抖音小店赚不到钱?

大家好&#xff0c;我是喷火龙。 今天来给大家聊聊&#xff0c;为什么大部分新手做抖店赚不到钱&#xff1f; 不知道大家想过这个问题没有&#xff0c;可能有些人把赚不到钱的原因归结于市场、或者平台、又或者运营技术以及做店经验。 但我觉得这些都不是重点&#xff0c;重…

FFmpeg 使用文档介绍二:命令行选项

关于FFmpeg的细节描述可以参考:FFmpeg 使用文档介绍一:细节描述和流选择 命令行选项 所有数值选项,除非另有说明,都接受一个表示数字的字符串作为输入,该字符串后面可以跟一个国际单位制(SI)的单位前缀,例如:‘K’(千)、‘M’(兆)或’G’(吉)。 如果将i附加到S…

爬虫实战教程:深入解析配乐网站爬取1000首MP3

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、引言 二、实战前准备 1. 选择目标网站 2. 分析网页结构 三、爬虫工作流程详解 1. 发…

高质量软件开发的全面指南(MIT-6.031)

首先&#xff0c;通过静态检查&#xff08;Static Checking&#xff09;和动态检查&#xff08;Dynamic Checking&#xff09;了解类型和变量的使用规则&#xff0c;学习如何编写文档和注释来记录假设和方法&#xff08;Assumptions and Methods&#xff09;。详细内容请见&…

Curator Framework如何写单元测试

概述 使用curator framework框架去操作zookeeper时&#xff0c;我们知道因其的方法风格是那种流式的编写风格&#xff0c;所以我们在写单元测试的时候要把链接zookeeper的操作给mock掉&#xff0c;那么着实是不太好写单测。不过好在curator framework有一个专门用于测试的模块…