vue3 + js + vite创建的项目中配置svg图
安装
npm install vite-plugin-svg-icons
npm install fast-glob
vite.config.js文件中配置如下内容
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
export default defineConfig({plugins: [vue(),createSvgIconsPlugin({// 指定需要缓存的图标文件夹iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],symbolId: 'icon-[name]'})]
})
自定义组件,在项目中自定义一个名为svgIcon.vue的组件,该组件的内容如下
<template><div><svg :class="svgClass" aria-hidden="true"><use :xlink:href="iconName" :fill="color" /></svg></div>
</template>
<script setup>import { computed } from 'vue'const props = defineProps({iconClass: {type: String,required: true},className: {type: String,default: ''},color: {type: String,default: ''}})const iconName = computed(() => `#icon-${props.iconClass}`)const svgClass = computed(() => props.className ? `svg-icon ${props.className}` : 'svg-icon')</script>
<style scoped>.svg-icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}
</style>
全局引入svgIcon组件
在main.js中全局引入如下内容
import 'virtual:svg-icons-register'
import SvgIcon from './components/svgIcon.vue'
const app = createApp(App)
app.component('svg-icon', SvgIcon)
app.use(router)
app.mount('#app')
使用svgIcon组件
这里假设在组件index.vue中使用
<template><div><svg-icon icon-class="vue"/></div>
</template>
<script setup></script>
<style scoped>
</style>
icon-class="vue"绑定的vue,其实就是在“src/assets/icons/vue.svg”这个图片

相关文章:
vue3 + js + vite创建的项目中配置svg图
安装 npm install vite-plugin-svg-icons npm install fast-globvite.config.js文件中配置如下内容 import { defineConfig } from vite import vue from vitejs/plugin-vue import { createSvgIconsPlugin } from vite-plugin-svg-icons import path from path export defau…...
c++ 找第一个只出现一次的字符
【题目描述】 给定一个只包含小写字母的字符串,请你找到第一个仅出现一次的字符。如果没有,输出no。 【输入】 一个字符串,长度小于100000。 【输出】 输出第一个仅出现一次的字符,若没有则输出no。 【输入样例】 abcabd【输出样…...
在 Unity 6 中使用APV为您的世界创建全局照明的新方法(一)
Unity 6 中推出的新照明功能让您能够更快速、更高效的完成对烘焙场景的照明工作,在本文中我们将与大家详细分享在 Unity 6 中应用自适应探针卷创建快速全局光照的更多细节与具体应用方法。由于内容比较丰富,我们将把内容分为三篇文章,以便大家…...
Win11安装安卓子系统WSA
文章目录 简介一、启用Hyper-V二、安装WSA三、安装APKAPK商店参考文献 简介 WSA:Windows Subsystem For Android 一、启用Hyper-V 控制面板 → 程序和功能 → 启用或关闭 Windows 功能 → 勾选 Hyper-V 二、安装WSA 进入 Microsoft Store,下拉框改为 …...
利用两种方式分别实现单例模式(懒汉式、饿汉式)
package testsingle;//实现单例的两种方式 public class TestMySingle {public static void main(String[] args) {ClassA ca1 ClassA.getClassA();ClassA ca2 ClassA.getClassA();System.out.println(ca1ca2);ClassB cb1 ClassB.getClassB();ClassB cb2 ClassB.getClassB(…...
js分页功能
先声明些全局变量方便我们在下面的代码中使用 //一页有多少条数据 let pagenum 10; //页码下标 let page_index 0; //总页数 let total_page; // 声明一个用于接数据的变量 let data; //获取数据 let res;通过获取数据渲染页面 // 渲染函数 function applys(da…...
Ubuntu20.04 编译运行 ORBSLAM2_with_pointcloud_map(以RGBD Orbbec Astra+为例)保姆级教程
Ubuntu20.04 编译运行 ORBSLAM2_with_pointcloud_map(以RGBD Orbbec Astra为例) 获取源码 git clone https://github.com/gaoxiang12/ORBSLAM2_with_pointcloud_map.git解压文件 得到如下内容 编译安装修改后的g2o cd g2o_with_orbslam2 mkdir build cd build cmake .. make…...
MyBatis(四)
第一章:MyBatis延迟加载策略 1. 延迟加载的概念 立即加载和延迟加载的区别,使用一对多的环境举例子。 立即加载:当前查询用户的时候,默认也把该用户所拥有的帐户信息查询出来了。 延迟加载:当前查询用户的时候&…...
【从零开始的LeetCode-算法】3285. 找到稳定山的下标
有 n 座山排成一列,每座山都有一个高度。给你一个整数数组 height ,其中 height[i] 表示第 i 座山的高度,再给你一个整数 threshold 。 对于下标不为 0 的一座山,如果它左侧相邻的山的高度 严格大于 threshold ,那么我…...
Docker常用命令总结~
1、关于镜像 获取镜像 docker pull [image name] [option:tag]AI助手//获取postgres镜像(没有设置镜像版本号则默认获取最新的,使用latest标记) docker pull postgres or docker pull postgres:11.14 列出本地镜像 docker imagesAI助手 指定镜像启动一个容…...
浅谈怎样系统的准备前端面试
前言 创业梦碎,回归现实,7 月底毅然裸辞,苦战两个月,拿到了美团和字节跳动的 offer,这算是从业以来第一次真正意义的面试,遇到蛮多问题,比如一开始具体的面试过程我都不懂,基本一直是…...
如何配置防火墙提高服务器安全性
配置防火墙是提高服务器安全性的重要措施之一。防火墙可以控制网络流量,限制未经授权的访问,防止恶意攻击。以下是配置防火墙以提高服务器安全性的详细指南。 一、为什么需要配置防火墙 防火墙的主要作用是: 限制未经授权的访问:…...
java集合-Map HashMap 源码解析
hashMap简介 HashMap是基于哈希表实现的,每一个元素是一个key-value对,无序,不可重复。HashMap是非线程安全的,只是用于单线程环境下,多线程环境下可以采用concurrent并发包下的concurrentHashMap。HashMap 实现了Ser…...
案例分享|企查查的数据降本增效之路
分享嘉宾 任何强 企查查科技股份有限公司 大数据架构负责人 关于企查查 “企查查”是企查查科技股份有限公司旗下的一款企业信用查询工具。2023年5月20日,企查查正式发布全球首款商查大模型——“知彼阿尔法”,该模型基于企查查覆盖的全球企业信用数据进…...
图书馆管理系统(四)基于jquery、ajax--完结篇
任务3.6 后端代码编写 任务描述 这个部分主要想实现图书馆管理系统的后端,使用 Express 框架来处理 HTTP 请求,并将书籍数据存储在一个文本文件 books.txt 中。 任务实施 3.6.1 引入模块及创建 Express 应用 const express require(express); cons…...
什么是Modbus协议网关?
在工业自动化领域,设备间的通信与数据交换是实现高效、智能控制的关键。Modbus协议作为一种广泛应用的通信协议,自1971年由Modicon公司首次推出以来,便以其标准、开放、支持多种电气接口等特点,在工业控制系统中占据了重要地位。然…...
Docker 容器中启用 SSH 服务
在 Docker 容器中运行 SSH 服务需要一些调整,因为 Docker 容器通常使用 init 系统而不是完整的 systemd。以下是配置 SSH 服务在 Docker Ubuntu 容器中运行的步骤: 1. 安装 SSH 服务 如果还未安装 OpenSSH,请先安装: apt update…...
Linux系统—利用systemd管控系统以及服务详解(十四)
本文为Ubuntu Linux操作系统- 第十四弹~~ 新的一周开始了,时间过得真快,这星期就要冬至啦!! 今天继续Linux系统高级管理板块,主要讲述使用systemd管控系统和服务~ 上期回顾:“Linux系统—进程管理详解” 更…...
人工智能 AI 大模型研究设计与实践应用技术毕业论文
标题:人工智能 AI 大模型研究设计与实践应用技术 内容:1.摘要 人工智能 AI 大模型是当前人工智能领域的研究热点之一,它具有高度的通用性、灵活性和智能性,可以应用于多种领域,如自然语言处理、计算机视觉、语音识别等。本文旨在探讨人工智能…...
已有 containerd 的情况下部署二进制 docker 共存
文章目录 [toc]学习目的开始学习dockerd启动 containerd准备配置文件启动 containerd 启动 docker准备配置文件启动 docker 环境验证停止 docker 和 containerd 学习目的 使用容器的方式做一些部署的交付,相对方便很多,不需要担心别人的环境缺少需要的依…...
Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式
点一下关注吧!!!非常感谢!!持续更新!!! 🚀 AI篇持续更新中!(长期更新) 目前2025年06月05日更新到: AI炼丹日志-28 - Aud…...
相机从app启动流程
一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...
Python如何给视频添加音频和字幕
在Python中,给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加,包括必要的代码示例和详细解释。 环境准备 在开始之前,需要安装以下Python库:…...
Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理
引言 Bitmap(位图)是Android应用内存占用的“头号杀手”。一张1080P(1920x1080)的图片以ARGB_8888格式加载时,内存占用高达8MB(192010804字节)。据统计,超过60%的应用OOM崩溃与Bitm…...
大学生职业发展与就业创业指导教学评价
这里是引用 作为软工2203/2204班的学生,我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要,而您认真负责的教学态度,让课程的每一部分都充满了实用价值。 尤其让我…...
中医有效性探讨
文章目录 西医是如何发展到以生物化学为药理基础的现代医学?传统医学奠基期(远古 - 17 世纪)近代医学转型期(17 世纪 - 19 世纪末)现代医学成熟期(20世纪至今) 中医的源远流长和一脉相承远古至…...
佰力博科技与您探讨热释电测量的几种方法
热释电的测量主要涉及热释电系数的测定,这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中,积分电荷法最为常用,其原理是通过测量在电容器上积累的热释电电荷,从而确定热释电系数…...
Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)
引言 在人工智能飞速发展的今天,大语言模型(Large Language Models, LLMs)已成为技术领域的焦点。从智能写作到代码生成,LLM 的应用场景不断扩展,深刻改变了我们的工作和生活方式。然而,理解这些模型的内部…...
人工智能--安全大模型训练计划:基于Fine-tuning + LLM Agent
安全大模型训练计划:基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标:为安全大模型创建高质量、去偏、符合伦理的训练数据集,涵盖安全相关任务(如有害内容检测、隐私保护、道德推理等)。 1.1 数据收集 描…...
鸿蒙(HarmonyOS5)实现跳一跳小游戏
下面我将介绍如何使用鸿蒙的ArkUI框架,实现一个简单的跳一跳小游戏。 1. 项目结构 src/main/ets/ ├── MainAbility │ ├── pages │ │ ├── Index.ets // 主页面 │ │ └── GamePage.ets // 游戏页面 │ └── model │ …...
