浙江省网站建设报价,简单网站开发工具,携程网站票面价含机场建设费吗,中国建筑人才证书查询官网在vue3 vite 项目中使用svg图标 插件#xff1a;vite-plugin-svg-icons
预加载 在项目运行时就生成所有图标,只需操作一次 dom高性能 内置缓存,仅当文件被修改时才会重新生成
安装
yarn add vite-plugin-svg-icons -D
# or
npm i vite-plugin-svg-icons -D
# or
pnpm inst…在vue3 vite 项目中使用svg图标 插件vite-plugin-svg-icons
预加载 在项目运行时就生成所有图标,只需操作一次 dom高性能 内置缓存,仅当文件被修改时才会重新生成
安装
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 { createSvgIconsPlugin } from vite-plugin-svg-icons;plugins: [createSvgIconsPlugin({// 指定缓存文件iconDirs: [resolve(process.cwd(), src/assets/icons/svg)],// 指定symbolId格式symbolId: icon-[dir]-[name],}),
]配置 main.ts
import virtual:svg-icons-register封装SvgIcon组件 src/components/SvgIcon
templatediv v-ifisExter :stylestyleExternalIcon v-bind$attrs classsvg-external-icon svg-icon /svg v-else :classsvgClass aria-hiddentrue v-bind$attrsuse :xlink:hreficonName //svg
/templatescript setup langts
import { isExternal } from /utils/validate
defineOptions({name: SvgIcon,
})const props withDefaults(defineProps{iconClass: string,className?: string
}(), {className:
})const isExter computed(() {return isExternal(props.className)
})
const iconName computed(() {return #icon-${props.iconClass}
})
const svgClass computed(() {if (props.className) {return svg-icon props.className} else {return svg-icon}
})
const styleExternalIcon computed(() {return {mask: url(${props.iconClass}) no-repeat 50% 50%,-webkit-mask: url(${props.iconClass}) no-repeat 50% 50%}
})
/scriptstyle scoped langscss
.svg-icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}.svg-external-icon {background-color: currentColor;mask-size: cover!important;display: inline-block;
}
/style组件使用
svg-icon icon-class404 /
