nuxt-svgs-icon

English documentation

因为Nuxt3 不支持vite的transformIndexHtml，所以 nuxt-svgs-icon 基于 vite-plugin-svgs-icons模块封装,该插件仅支持Nuxt3

关于它的更多，请移步 vite-plugin-svgs-icons

Quick Setup

1. Add nuxt-svgs-icon dependency to your project

# Using pnpm
pnpm add nuxt-svgs-icon -D

# Using npm
npm install nuxt-svgs-icon --save-dev

2. Add nuxt-svgs-icon to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'nuxt-svgs-icon'
    // 可配置
    /*
    ['nuxt-svgs-icon',{
       // options
    }]
    */
  ]
})

options

| 参数名 | 类型 | 描述 | 默认值 | | -------- | -------- | -------- | -------- | |dir|String|存放svg图标的目录|${process.cwd()}/src/assets/svg| |ssr|Boolean|渲染模式, 其它正常情况很少情况会用到这种方式! 其实你可以直接用 vite-plugin-svgs-icons 即可|true|

NuxtSvgIcon组件使用说明

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

组件参数说明

| 参数名 | 类型 | 默认值 | | -------- | -------- | -------- | |name|String|必需设置name，与文件名称一样， 否则不显示哦。name参数是svg文件名称，比如：svg/logo.svg 那么你引用这个svg 只需要name="logo"| |color|String| 设置颜色此方法仅支持单色修改！ 关于多色修改请移步| |size|String、Number、Array| size="28"、size="[10, 20]" |

版本描述：

>=v1.1.3 更新vite-plugin-svgs-icons, 支持更多svg， 多色修改

nuxt >= ^3.4.1

☺️ 🤪😋😘