vue3中使用svg并封装成组件

打包svg地图

  • 安装插件

    yarn add vite-plugin-svg-icons -D
    # or
    npm i vite-plugin-svg-icons -D
    # or
    pnpm install vite-plugin-svg-icons -D
    
  • 使用插件

    vite.config.ts

    import { VantResolver } from 'unplugin-vue-components/resolvers'
    +import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
    +import path from 'path'// https://vitejs.dev/config/
    export default defineConfig({plugins: [vue(),Components({dts: false,resolvers: [VantResolver({ importStyle: false })]}),
    +    createSvgIconsPlugin({
    +      // 指定图标文件夹,绝对路径(NODE代码)
    +      iconDirs: [path.resolve(process.cwd(), 'src/icons')]
    +    })],
    
  • 导入到main

    +import 'virtual:svg-icons-register'
    
  • 使用svg精灵地图

        <svg aria-hidden="true"><!-- #icon-文件夹名称-图片名称 --><use href="#icon-login-eye-off" /></svg>
    

    在这里插入图片描述

小结:

  • icons文件打包的产物?
    • 会生成一个 svg 结构(js创建的)包含所有图标,理解为 精灵图
  • 怎么使用svg图标?
    • 通过 svg 标签 #icon-文件夹名称-图片名称 指定图片,理解 精灵图定位坐标

【坑】vite-plugin-svg-icons报错:Cannot find package ‘fast-glob’

在这里插入图片描述

自行安装一下fast-glob依赖解决该问题

yarn add fast-glob -D

图标组件-封装svg组件

组件 components/CpIcon.vue

<script setup lang="ts">
// 提供name属性即可
defineProps<{name: string
}>()
</script><template><svg aria-hidden="true" class="cp-icon"><use :href="`#icon-${name}`" /></svg>
</template><style lang="scss" scoped>
.cp-icon {// 和字体一样大width: 1em;height: 1em;
}
</style>

如果使用了 unplugin-vue-components 默认 src/compoenents 自动导入注册;
给组件添加类型,让写属性和事件可以有提示
类型 types/components.d.ts

// 1. 导入组件实例
import CpIcon from '@/components/CpIcon.vue'
// 2. 声明 vue 类型模块
declare module 'vue' {
// 3. 给 vue  添加全局组件类型,interface 和之前的合并interface GlobalComponents {// 4. 定义具体组件类型,typeof 获取到组件实例类型// typeof 作用是得到对应的TS类型CpIcon: typeof CpIcon}
}

使用:

<template><cp-icon name="login-eye-off"></cp-icon>
</template>

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

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

相关文章

操作系统【OS】I/O核心子系统

定义 举例 用户层软件 用户层软件实现了与用户交互的接口用户层软件将用户请求翻译成格式化的I/O请求&#xff0c;并通过“系统调用”请求操作系统内核的服务用户可直接使用该层提供的、与I/0操作相关的库函数对设备进行操作 如发送read命令如讲二进制整数转换为ascii码的…

Spring Boot Endpoints:端点

Spring Boot 内置端点以及暴露端点列表&#xff1a; 端点被启用后&#xff0c;并不一定能够被访问&#xff0c;还要看端点是否被暴露&#xff0c;并且暴露的方式是怎样的。因为端点可能会包含敏感信息&#xff0c;所以需要谨慎暴露相关端点。Spring Boot 3.0.0 更改了默认暴露…

Vue3基本使用

1.vue3特性 vue的引入方式 cdn引入 示例代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Document</title> </head> <body><h2>哈哈哈</h2><p>我是内容&…

基于opencv的selenium滑动验证码的实现

这篇文章主要介绍了基于opencv的selenium滑动验证码的实现&#xff0c;文中通过示例代码介绍的非常详细&#xff0c;对大家的学习或者工作具有一定的参考学习价值&#xff0c;需要的朋友们下面随着小编来一起学习学习吧 基于selenium进行动作链 由于最近很多人聊到滑动验证码…

C语言之文件操作

目录 实现文件读写 打开文件fopen函数的用法 写文件fprintf函数的用法 读文件fscanf函数的用法 写文件fwrite函数的用法 读文件fread函数的用法 关闭文件fclose函数的用法 实现文件读写 一直以来&#xff0c;我们学习C语言都是数据的处理&#xff0c;这些数据都是在内存…

解决javascript报错:SyntaxError: Invalid Unicode escape sequence

在处理cookie时报这个错&#xff1a; 网上搜了一圈都说是反斜杠问题&#xff0c;要把\替换成/ 但是试了网上的replace替换&#xff1a; replace(/\\/g, /) 结果没有用&#xff01;&#xff01;&#xff01; 然后我干脆直接做了一个最简单字符串赋值&#xff0c;再打印出来。…

0036【Edabit ★☆☆☆☆☆】【让我加油】Let‘s Fuel Up!

0036【Edabit ★☆☆☆☆☆】【让我加油 】Let’s Fuel Up! control_flow language_fundamentals numbers Instructions A vehicle needs 10 times the amount of fuel than the distance it travels. However, it must always carry a minimum of 100 fuel before setting o…

C++ stack 的使用

目录 1. 无参构造函数 2. void push(const T& x) 3. void pop() 4. T& top() 5. bool empty() 6. size_t size() 7. 总结 1. stack是一种容器适配器&#xff0c;专门用在具有后进先出操作的上下文环境中&#xff0c;其删除只能从容器的一端进行 元素的插入与…

快递排序Java

快速排序是在工具类常用的排序算法&#xff0c;快速排序的思想主要是选定一个基准元素&#xff0c;然后找到基准元素的位置&#xff0c;然后再分别排序他左边的和他右边的,快速排序是不稳定的&#xff0c;时间复杂度位Nlog(N),最极端的情况就是一个反向排好顺序的数组&#xff…

leetcode55. 跳跃游戏

leetcode55. 跳跃游戏 方案一&#xff1a;dfs超时 class Solution { public:bool dfs(vector<int>& nums, int idx){if (idx (nums.size() - 1))return true;int dist nums.size() - idx;for (int i 0; (i < nums[idx]) && (i < dist); i) {if (d…

【机器学习合集】人脸表情分类任务Pytorch实现TensorBoardX的使用 ->(个人学习记录笔记)

人脸表情分类任务 注意&#xff1a;整个项目来自阿里云天池&#xff0c;下面是开发人员的联系方式&#xff0c;本人仅作为学习记录&#xff01;&#xff01;&#xff01;该文章原因&#xff0c;学习该项目&#xff0c;完善注释内容&#xff0c;针对新版本的Pytorch进行部分代码…

快速入门Elasticsearch:安装、基本概念、分词器和文档基本操作详解

本文主要介绍快速入门 Elasticsearch&#xff0c;从 安装 、 基本概念 、 分词器 、*** 文档基本操作 *** 这 4 个方面快速入门。 Elasticsearch 是一款近实时的搜索引擎&#xff0c;底层是基于 Lucene 做搜索&#xff0c;再此基础上加入了分布式的特性&#xff0c;以便支持海…

2022年12月 Python(一级)真题解析#中国电子学会#全国青少年软件编程等级考试

Python等级考试(1~6级)全部真题・点这里 一、单选题(共25题,每题2分,共50分) 第1题 关于Python语言的注释,以下选项中描述错误的是?( ) A: Python语言有两种注释方式:单行注释和多行注释 B: Python语言的单行注释以#开头 C: Python多行注释使用###来做为标记 D: …

RabbitMQ高级篇 笔记

这是一些高级的内容。 RabbitMQ还是运行在网络上的&#xff0c;倘若遇到了网络故障&#xff0c;mq自己挂了&#xff0c;出异常了&#xff0c;都会造成最终状态不一致的问题。这就是可靠性问题。 可靠性&#xff1a;一个消息发送出去之后&#xff0c;至少被消费1次。 要解决这3个…

十九、类型信息(1)

本章概要 为什么需要 RTTI RTTI&#xff08;RunTime Type Information&#xff0c;运行时类型信息&#xff09;能够在程序运行时发现和使用类型信息 RTTI 把我们从只能在编译期进行面向类型操作的禁锢中解脱了出来&#xff0c;并且让我们可以使用某些非常强大的程序。对 RTTI …

第十三章:L2JMobius学习 – 玩家攻击怪物

本章节&#xff0c;我们学习一下玩家周边怪物的刷新。在上一章节中&#xff0c;我们提过这个事情。当玩家移动完毕之后&#xff0c;会显示周围的游戏对象&#xff0c;其中就包括NPC怪物。当然&#xff0c;玩家“孵化”自己&#xff08;调用spawnMe方法&#xff09;的时候&#…

Hadoop分布式安装

首先准备好三台服务器或者虚拟机&#xff0c;我本机安装了三个虚拟机&#xff0c;安装虚拟机的步骤参考我之前的一篇 virtualBox虚拟机安装多个主机访问虚拟机虚拟机访问外网配置-CSDN博客 jdk安装 参考文档&#xff1a;Linux 环境下安装JDK1.8并配置环境变量_linux安装jdk1.8并…

Zoho Mail荣登福布斯2023年企业邮箱榜单,引领行业新方向!

几十年来&#xff0c;电子邮件一直是电子通信的重要形式&#xff0c;并且在未来的许多年里&#xff0c;它可能会无处不在。尽管有大量免费电子邮件服务可供用户和企业使用&#xff0c;但其中许多服务缺乏专门的功能&#xff0c;例如适合办公室使用的集中管理。 福布斯小型企业顾…

1024特别剪辑: 使用Python Turtle 库绘制一棵随机生成的树

&#x1f388;个人主页:&#x1f388; :✨✨✨初阶牛✨✨✨ &#x1f43b;强烈推荐优质专栏: &#x1f354;&#x1f35f;&#x1f32f;C的世界(持续更新中) &#x1f43b;推荐专栏1: &#x1f354;&#x1f35f;&#x1f32f;C语言初阶 &#x1f43b;推荐专栏2: &#x1f354;…

MYSQL(事务+锁+MVCC+SQL执行流程)理解(2)

一)MYSQL中的锁(知识补充) 可以通过In_use字段来进行判断是否针对于表进行加了锁 1)对于undo log日志来说:新增类型的&#xff0c;在事务提交之后就可以清除掉了&#xff0c;修改类型的&#xff0c;事务提交之后不能立即清除掉这些日志会用于mvcc只有当没有事务用到该版本信息时…