30_10_郑州网站制作,网站设计的公司怎么样,招工信息发布平台,企业营业执照查询网上查询目录 需求svg使用简述插件使用简述实现安装插件1、配置vite.config.ts2、src/main.ts引入注册脚本3、写个icon组件4、使用组件 需求
在vue3项目中#xff0c;需要批量导入某个文件夹内数量不确定的svg文件用来作为图标#xff0c;开发完成后能够通过增减文件夹内的svg文件需要批量导入某个文件夹内数量不确定的svg文件用来作为图标开发完成后能够通过增减文件夹内的svg文件从而影响图标的数量。
svg使用简述
svg是一种 xml语言svg作为html标签使用的时候除了svg标签svg path d*/ /svg和img srcsvg_url外还有很多方式可以使用。 本次仅使用其中的symbol属性详情参阅相关文档 MDN-svg symbol元素用来在document中生成图形模板提供给use元素实例化显示。 symbol元素本身是隐藏的实例化后的元素才会显示symbol元素仅需插入一次可多次通过use复用 use xlink:href“#symId” 标签属性xlink:href与 symbol id“symId” 标签属性id相对应 插件使用简述
vite-plugin-svg-icons是一个vite插件提供轻松导入svg文件作为symbol元素并插入到document中的功能。 使用起来也十分容易只需要在vite.config.ts中加个配置然后在src/main.ts中引入即可 详情参阅 插件中文文档
实现 原本我想使用vite提供的批量导入文件来实现import.meta.glob(/src/**/*.svg) 不过这种方式需要写一大堆异步方法去解决文件动态导入的问题而且用户体验并不好还引发了vue3报issue 所以最终选择使用插件在编译的时候就导入所有svg文件解决了动态导入的问题让业务逻辑更流畅 安装插件
插件官网 插件中文文档
npm i vite-plugin-svg-icons -D1、配置vite.config.ts
import { createSvgIconsPlugin } from vite-plugin-svg-icons
import path from pathexport default () {return {plugins: [createSvgIconsPlugin({// 指定需要缓存的图标文件夹iconDirs: [path.resolve(process.cwd(), src/assets/icon-svg/)],// 指定symbolId格式symbolId: icon-svg-[name],}),}),],}
}2、src/main.ts引入注册脚本
import virtual:svg-icons-register到这里svg 雪碧图就已经生成到页面的body中了
3、写个icon组件
接收一个name参数对应symbol的id属性
templatesvg aria-hiddentrue use :xlink:hrefsymbolId //svg
/templatescript setup langts
import { computed } from vue;interface Props {name: string;
}const props definePropsProps();
const symbolId computed(() #icon-svg-${props.name});
/script4、使用组件
在页面里使用组件
templateel-icon :size32!-- name值和文件名对应 --SvgIcon name404 //el-icon
/templatescript setup langts
// 导入组件
import SvgIcon from /components/SvgIcon.vue;/script图标出来了
如果需要批量导入
templatetemplate v-for(e, i) in svgList :keyiel-icon :size32component :ise.module :namee.name/component/el-icon/template
/templatescript setup langts
import SvgIcon from /components/SvgIcon.vue;// 引入/src/assets/icon-svg/文件夹下的所有svg文件
const svgModules import.meta.glob(/src/assets/icon-svg/*.svg);
const svgList Object.keys(svgModules).map((key) ({name: key.replace(/^.*\/(\S)\..*/, $1),module: SvgIcon,
}));
/script然后图标就有了
