vite-plugin-svgs-icons v1.0.8

vite-plugin-svgs-icons

原 vite-plugin-vue-svg-icons 更名为 vite-plugin-svgs-icons

English documentation

介绍

它是一个svg雪碧图插件🤔，可轻松修改Color、MultiColor、Size
内置vue组件可直接调用, 虽然支持部份svg icon 多色修改，但可能并不是所有都支持哦！

多色SVG如何修改?

installation

yarn add vite-plugin-svgs-icons -D

npm i vite-plugin-svgs-icons -D

pnpm add vite-plugin-svgs-icons -D

vite.config.js

    import path from 'path';
    import vitePluginSvgsIcons from 'vite-plugin-svgs-icons'
    export default defineConfig({
        plugins: [
            vitePluginSvgsIcons({
                dir: path.resolve(__dirname, 'src', 'assets', 'svg'),
            })
        ],
    })

Nuxt3

    import path from 'path';
    import vitePluginSvgsIcons from 'vite-plugin-svgs-icons';
    export default defineNuxtConfig({
        vite: {
            plugins: [
                vitePluginSvgsIcons({
                    dir: path.resolve(__dirname, 'assets', 'svg'),
                })
            ]
        }
    })

也可以用Nuxt module nuxt-svgs-icon

vitePluginSvgsIcons 参数配置

    // 部份svg icon多色也支持修改color
    // 可多级目录，但不会把目录名称加在svg名称中，所以svg 名称要是唯一的喔
    |assets
        |svg
            |xxx
                xxx.svg
                xxx.svg
                xxx.svg
            xxx.svg
            xxx.svg
            xxx.svg

svg组件使用说明

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

    // app.vue 局部注册使用
    <script setup>
        import svgIcon from 'virtual:svg-icon';
    </script>
    // name参数是svg文件名称，比如：svg/logo.svg
    // 那么你引用这个svg 只需要name="logo"
    <template>
        // 可以这样
        <svgIcon name="logo" color="#f00" size="80" />
        // 也可以这样，如果你是H5，推荐这种喔
        <svgIcon name="logo" style="color:#f00;width: 80px;height:80px" />
    </template>

virtual:svg-icon 组件参数说明

🤡👻👽👾🤖😈🤠👺👹😉😜🤪🤪🤪🤪