前端项目学习记录1:svg图标的封装与使用

1.下载svg依赖

pnpm i vite-plugin-svg-icons -D

          还有一个,下面的不安装可能会报错

pnpm i fast-glob -D

2.vite.config.ts配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";
//引入svg需要用到的插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
export default defineConfig({
    //TODO
  plugins: [vue() , 
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      symbolId: 'icon-[dir]-[name]'
    })
  ],
    //END
  resolve:{
    alias:{
      "@":path.resolve(__dirname , "./src"),
    }
  }
})

3.main.ts配置

import { createApp } from 'vue'
import App from './App.vue'
//引入element-plus插件与样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
///
//引入element-plus国际化
//忽略当前文件ts类型检测,要不然打包会失败
//@ts-ignore 
import zhCn from 'element-plus/es/locale/lang/zh-cn.mjs'

//TODO
//引入svg配置文件
import 'virtual:svg-icons-register'

//引入自定义插件对象:注册整个项目全局组件
import globalComponent from '@/components'
createApp(App).use(ElementPlus,{ locale: zhCn }).use(globalComponent).mount('#app')
//END

4.文件夹创建

        assets -> icons -> ...svg

        assets里面创建icons文件夹,里面放.svg矢量图标(记得去色)

5.SvgIcon组件

        components -> SvgIconG -> index.vue

<template>
    <svg :style="{ width , height }">
        <use :xlink:href="prefix + name" :fill="color"></use>
    </svg>
</template>

<script setup lang='ts'>
defineProps({
    name: {
        type: String,
    }, 
    width: {
        type: String,
        default: '1em'
    }, 
    height: {
        type: String,
        default: '1em'
    }, 
    color: {
        type: String,
        default: '#333'
    }, 
    prefix: {
        type: String,
        default: '#icon-'
    }
})
</script>

<style scoped lang="scss">

</style>

6.自定义注册全局插件

        components里面创建index.ts

import SvgIconG from './SvgIconG/index.vue';
import ... from '...';
//全局对象
const allGlobalComponents :any = { SvgIconG , ... }
export default {
    install(app : any){
        Object.keys(allGlobalComponents).forEach(key => {
            app.component(key, allGlobalComponents[key]);
        })
    }
}

        然后在main.ts里面注册就行(方法在上面main.ts里面)

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Rancher-Longhorn-新增磁盘以及卷创建原理和卷副本调度规则

一、添加磁盘-官网指引 重点在于&#xff1a; 1、比如你新增了一块盘&#xff0c;你需要做一下事情&#xff1a; 1、执行 lsblk 能找到你的盘。 2、然后执行 fdisk /dev/sdxx 分区你的盘。 3、然后对于分区部署文件系统&#xff0c; mkfs.xfs 4、然后执行 mount /dev/sdxxx 你…

【每日刷题】Day25

【每日刷题】Day25 &#x1f955;个人主页&#xff1a;开敲&#x1f349; &#x1f525;所属专栏&#xff1a;每日刷题&#x1f34d; &#x1f33c;文章目录&#x1f33c; 1. 238. 除自身以外数组的乘积 - 力扣&#xff08;LeetCode&#xff09; 2. 82. 删除排序链表中的重复…

数据结构练习:链表扩容

大致步骤&#xff1a; 一&#xff1a;创建一个新链表&#xff0c;遍历原链表的同时&#xff0c;将原链表的值复制给新链表 二&#xff1a;将新链表插入到原链表中&#xff08;大致如下&#xff09; 注&#xff1a; 1.头结点是不存有数据的 2.记得malloc后要free 3.*&是…

uniapp真机调试无法调用之前页面的方法

在uniapp通过getCurrentPages&#xff08;&#xff09;页面栈调用之前页面方法&#xff0c;h5可生效但app真机调试找不到方法 let pages getCurrentPages()let beforePage pages[pages.length - 3]beforePage.refresh() //真机调试refresh为undefined解决&#xff1a; 后面…

5G前传光纤传输的25G光模块晶振SG2016CAN

一款适用于5G前传光纤传输网络中的25G光模块的5G晶振SG2016CAN。随着5G时代的到来&#xff0c;5G晶振的重要性也不言而喻&#xff0c;小体积宽温晶振SG2016CAN可以用于5G前传的25G光模块&#xff0c;具有高稳定性、小体积、宽温等优势。在5G前传光纤传输网络中&#xff0c;25G光…

操作系统课程--考纲要求

第一/二次课&#xff1a; 绪论 【学习内容与目标】 1、操作系统目标及定义 掌握操作系统的设置目标&#xff0c;理解并掌握操作系统的定义&#xff0c;了解操作系统的地位以及从资源管理者角度和用户角度了解操作系统的组成。 2、 操作系统的特征与功能 掌握操作系统的特征&…

吴恩达2022机器学习专项课程(一) 6.2 逻辑回归第三周课后实验:Lab2逻辑回归

问题预览/关键词 逻辑回归预测分类创建逻辑回归算法Sigmoid函数Sigmoid函数的表示sigmoid输出的结果Numpy计算指数的方法实验python实现sigmoid函数打印输入的z值和sigmoid计算的值可视化z值和sigmoid的值添加更多数据&#xff0c;使用逻辑回归可以正常预测分类![在这里插入图片…

【C++航海王:追寻罗杰的编程之路】C++11(四)

目录 1 -> 相关文章 【C航海王&#xff1a;追寻罗杰的编程之路】C11(一) 【C航海王&#xff1a;追寻罗杰的编程之路】C11(二) 【C航海王&#xff1a;追寻罗杰的编程之路】C11(三) 2 -> lambda表达式 2.1 -> C98中的一个例子 2.2 -> lambda表达式 2.3 ->…

【国产虚拟仪器】 NI-9205模块国产替代,±10 V,250 kS/s,16位,32通道C系列电压输入模块

10 V&#xff0c;250 kS/s&#xff0c;16位&#xff0c;32通道C系列电压输入模块 ​NI‑9205​可​执行​单​端​或​差分​模拟​输入&#xff0c;​每​个​具有​四​个​可​编​程​的​输入​范围。 该​模​块​以​较​低​的​价格​提供​了​高​通道​数​和​高…

Markdown编辑器的使用

欢迎使用Markdown编辑器 你好&#xff01; 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章&#xff0c;了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持&#x…

Netperf网络测试

Netperf网络测试 Netperf简介安装NetperfCentos7安装NetperfWindows安装Netperf 批量网络流量性能测试启动netserver服务端 查看netperf帮助查看netper参数查看netserver参数 TCP_STREAM测试启动netserver服务端客户端 UDP_STREAM测试启动netserver服务端客户端 测试请求/应答网…

【Python】Python语言基础

1、运用python的输入输出函数 2、运行python的条件表达式 3、练习导入库函数并使用 1、运用输入输出函数编写程序&#xff0c;将华氏温度转换成摄氏温度。换算公式&#xff1a;C(F-32)*5/9,其中C为摄氏温度&#xff0c;F为华氏温度。 &#xff08;1&#xff09;源代码&#…

心理学上有个概念叫:习惯性反驳(附上解决办法)

在心理学上&#xff0c;有一个词&#xff0c;叫做习惯性反驳。 什么意思呢&#xff1f; 就是不管你说什么&#xff0c;他都要反驳你&#xff0c;最后把你带入负面的情绪黑洞&#xff0c;搞得你非常崩溃。 一个总是习惯性反驳的人&#xff0c;其实是非常可怕的。 习惯性反驳的3个…

.net EntityFramework EF

创建EF 方法1 方法二 安装的 版本是 中间没有弹出让选框架的界面&#xff0c; EF三种开发方式 1》》 db first 先设计数据库→然后在代码通过EF与数据库建立映射关系&#xff0c;是EF最早的一种使用方式,使用广泛.以数据库为驱动&#xff0c;生成实体模型&#xff0c;从而驱…

喀秋莎Camtasia2023中文破解Crack下载附安装教程 2023免费补丁百度云 电脑版注册机提取

Camtasia2023破解版是一款备受好评的电脑录屏软件&#xff0c;主要用于教授课程&#xff0c;培训他人&#xff0c;以及进行沟通和屏幕分享。内置视频编辑器支持拖放文本&#xff0c;提供了强大的屏幕录像、视频的剪辑和编辑、视频菜单制作、视频剧场和视频播放功能等&#xff0…

C#实现 IDbConnection / IDbCommand 等相关通用数据接口

目录 关于数据接口 对象执行流程 范例运行环境 设计与实现 引用 GetConnection方法 GetCommand方法 GetParameter方法 小结 关于数据接口 在.net 应用中&#xff0c;与数据库进行连接、访问和执行经常会用到数据接口的相关对象&#xff0c;如下&#xff1a; 1、 Con…

【深度学习实战(26)】标签处理之语义分割标签转换,数据集划分

一、标签转换 我们在使用labeme标签工具&#xff0c;标注完数据后会获得json文件。在标注结束过后&#xff0c;我们需要通过标签转换操作&#xff0c;生成jpg格式原始图片和png格式mask标签图。 1.1 使用img_b64_to_arr将json标签中二进制图像数据变成numpy格式数据&#xf…

场外个股期权是什么

场外个股期权是什么 场外个股期权是指在沪深交易所之外交易的个股期权&#xff0c;其本质是一种金融衍生品&#xff0c;允许投资者在股票交易场所外以特定价格买进或卖出证券。这种权利与股价变动情况紧密相关&#xff0c;使得投资者能够根据股价的变动情况对公司进行投票决定…

docker中的资源控制

前言 docker 使用cgrqup控制资源&#xff0c;K8S 里面也有limit&#xff08;使用上限&#xff09; docker通过cgroup来控制容器使用的资源配额&#xff0c;包括CPU、内存、磁盘三大方面&#xff0c;基本覆盖了常见的资源配额和使用量控制。 Cgroup 是 Control …

想要应聘前端工程师——学习路线指南

前端工程师学习路线 按照前端岗位需求,以优先学习工作更需要,面试更常考的内容为原则,由浅入深,层层铺垫,与时俱进,可以较容易地总结出前端学习路线图: HTML / CSS / JavaScript 基础学习 《Web 入门》 MDN 权威入门指南,HTML / CSS / JavaScript 快速上手 《CSS 世界…
最新文章