vite-plugin-vue-svg-icons v3.1.5

#请移步到 vite-plugin-svgs-icons 迁移到 vite-plugin-svgs-icons

vite-plugin-vue-svg-icons

English documentation

Nuxt3 nuxt-svg-icon

介绍

一个svg图标的插件，无需每个svg都发起http请求, 组件可以改变color、size【仅支持单色】, 支持全部iconfont.cn上的svg

npm i vite-plugin-vue-svg-icons -D

pnpm add vite-plugin-vue-svg-icons -D

vite.config.js 使用说明

    import vitePluginVueSvgIcons from 'vite-plugin-vue-svg-icons'
    export default defineConfig({
        plugins: [
            vitePluginVueSvgIcons()
        ],
    })

vitePluginVueSvgIcons 方法传参，Object， 如果不需要的svg图标建议不要放在目录下

    // 目录，注意
    // 多色的svg 请放在multicolor这个目录，多色无法修改color, 
    // 如果多色的svg不放在multicolor这个目录，就会被修改为单色
    // 没有multicolor目录你就自已建
    |assets
        |svg
            |multicolor
                xxx.svg
                xxx.svg
                xxx.svg

            xxx.svg
            xxx.svg
            xxx.svg

svg组件使用说明

    // app.vue 局部注册使用
    <script setup>
        import svgIcon from 'svg-icon'
    </script>
    // name参数是svg文件名称，比如：svg/logo.svg
    // 那么你引用这个svg 只需要name="logo"
    <template>
        <svgIcon name="logo" color="#f00" size="80" />
    </template>

    // main.js 全部注册
    import svgIcon from 'svg-icon'
    VueApp.component('svg-icon', svgIcon);

组件参数说明

版本描述：

v3.1.2 > 优化了build配置, 优化导入方式!
v3.1.0 > 升级新版, 更换构建工具vite
v3.0.21 < 小于这个版本的放弃与删除了！升级新版
v3.0.21 正常版
v3.0.22 优化内部定义的id：给id增加前缀