网站建设最常见的问题,通信网络维护是做什么的,二级学院网站建设,打造一个app需要多少钱使用vite显示本地svg图标 vite-plugin-svg-icons是一个Vite插件#xff0c;其作用是将SVG图标文件转换为Vue组件#xff0c;以便在Vue项目中使用。 使用vite-plugin-svg-icons插件#xff0c;可以将SVG图标文件导入到项目中#xff0c;并将其转换为可复用的Vue组件。这样其作用是将SVG图标文件转换为Vue组件以便在Vue项目中使用。 使用vite-plugin-svg-icons插件可以将SVG图标文件导入到项目中并将其转换为可复用的Vue组件。这样就可以像使用普通Vue组件一样使用这些SVG图标包括在模板中直接使用、传递属性、绑定事件等。 该插件还提供了一些额外的功能如自动按需引入图标、支持图标的自定义命名、支持指定图标大小等。 总之vite-plugin-svg-icons插件的作用是简化在Vue项目中使用SVG图标的过程提供了更加灵活和方便的方式来管理和使用这些图标。
vite-plugin-svg-icons 安装 node version: 12.0.0 vite version: 2.0.0 npm i vite-plugin-svg-icons -D
// 或者
yarn add vite-plugin-svg-icons -D
// 或者
pnpm install vite-plugin-svg-icons -D
配置使用vite-plugin-svg-icons
vite.config.ts 中的配置插件
import { createSvgIconsPlugin } from vite-plugin-svg-icons
import path from pathexport default () {return {plugins: [createSvgIconsPlugin({// 指定需要缓存的图标文件夹iconDirs: [path.resolve(process.cwd(), src/icons)],// 指定symbolId格式symbolId: icon-[dir]-[name],/*** 自定义插入位置* default: body-last*/inject?: body-last | body-first/*** custom dom id* default: __svg__icons__dom__*/customDomId: __svg__icons__dom__,}),],}
}
在 src/main.ts 内引入注册脚本
import virtual:svg-icons-register
到这里 svg 已经引入可以使用
如何在Vue 组件使用
/src/components/SvgIcon.vue
templatesvg aria-hiddentrueuse :xlink:hrefsymbolId :fillcolor //svg
/templatescript
import { defineComponent, computed } from vueexport default defineComponent({name: SvgIcon,props: {prefix: {type: String,default: icon,},name: {type: String,required: true,},color: {type: String,default: #333,},},setup(props) {const symbolId computed(() #${props.prefix}-${props.name})return { symbolId }},
})
/script
icons 目录结构
# src/icons- icon1.svg
- icon2.svg
- icon3.svg
- dir/icon1.svg
/src/App.vue
templatedivSvgIcon nameicon1/SvgIconSvgIcon nameicon2/SvgIconSvgIcon nameicon3/SvgIconSvgIcon namedir-icon1/SvgIcon/div
/templatescript
import { defineComponent, computed } from vueimport SvgIcon from ./components/SvgIcon.vue
export default defineComponent({name: App,components: { SvgIcon },
})
/script
优点 可扩展性vite-plugin-svg-icons 提供了灵活的配置选项允许开发者自定义图标的加载和使用方式。 轻量级vite-plugin-svg-icons 是一个轻量级的插件没有额外的依赖可以快速集成到现有的项目中。 性能优化vite-plugin-svg-icons 可以将 SVG 图标转换为内联的 Vue 组件减少 HTTP 请求提高页面加载速度。 简化开发流程使用 vite-plugin-svg-icons开发者可以直接在代码中引用 SVG 图标无需手动处理 SVG 文件。 兼容性vite-plugin-svg-icons 支持多种类型的 SVG 图标包括普通的 SVG 文件、Symbol 图标和图标字体等。
