网站建设推广优化排名,开发网站公司的简介,互联网服务提供商,电商平台数据上一篇我们介绍了ViteVue3TypeScript项目中mockjs的安装和配置i。本篇我们来介绍封装SVG图标组件。svg特征Preloading所有图标都是在项目运行时生成的#xff0c;只需要操作一次dom即可。高性能内置缓存#xff0c;仅在文件被修改时才会重新生成。安装插件vite-plugin-svg-ic…上一篇我们介绍了ViteVue3TypeScript项目中mockjs的安装和配置i。本篇我们来介绍封装SVG图标组件。svg特征Preloading所有图标都是在项目运行时生成的只需要操作一次dom即可。高性能内置缓存仅在文件被修改时才会重新生成。安装插件vite-plugin-svg-icons//安装依赖
npm i vite-plugin-svg-icons -D配置vite.config.ts在vite.config.ts中添加相关配置内容//引入依赖
import path from path;
import { createSvgIconsPlugin } from vite-plugin-svg-icons;//启用插件
createSvgIconsPlugin({// 指定图标文件夹绝对路径NODE代码iconDirs: [path.resolve(process.cwd(), src/svgs)],
}),创建图标库项目src文件夹下新建svgs文件夹随便导入一个svg图标文件这里我下载了两个图标user.svg和pwd.svg封装SvgIcon组件在components文件夹下创建SvgIcon组件代码如下templatesvg aria-hiddentrue classsvg-icon :style{ width: width px, height: height px, color: color }use :xlink:hrefsymbolId //svg
/templatescript langts
import { defineComponent, computed } from vue;
export default defineComponent({name: SvgIcon,props: {// 使用的svg图标名称也就是svg文件名name: {type: String,required: true,},prefix: {type: String,default: icon,},color: {type: String,default: #fff,},width: {type: String,default: 32},height: {type: String,default: 32}},setup(props) {const symbolId computed(() #${props.prefix}-${props.name});return { symbolId };},
});
/scriptstyle scope
.svg-icon {fill: currentColor;
}
/style全局引入创建完组建后我们需要在main.ts中对组件进行全局引入// 引入Svg组件
import virtual:svg-icons-register;
import SvgIcon from ./components/SvgIcon.vue;这样我们就可以在项目中直接使用SvgIcon组件来展示图标了svg-icon namepwd width48 height48 color#ffff00/svg-iconSvg图标使用在src/views/index.vue中添加svg图片引入图标规则svgs文件夹下的直接name文件名即可如果存在文件夹包裹则遵循规则name文件夹名-文件名。divh1SVG 图标使用/h1svg-icon nameuser width64 height64/svg-iconsvg-icon namelogin-pwd width48 height48 color#ffff00/svg-icon
/div注意如果想要让color属性生效修改图标颜色首先要svg图标支持fill属性修改才可以。我们可以在编辑器打开svg然后把fill或者strock的值改成currentColor即可。运行效果至此SvgIcon组件封装完成我相信每天学习一点点收获成长亿点点
