1.1.4 • Published 12 months ago

nuxt-svgs-icon v1.1.4

Weekly downloads
-
License
MIT
Repository
github
Last release
12 months ago

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
  1. Add nuxt-svgs-icon to the modules section of nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    'nuxt-svgs-icon'
    // 可配置
    /*
    ['nuxt-svgs-icon',{
       // options
    }]
    */
  ]
})

options

参数名类型描述默认值
dirString存放svg图标的目录${process.cwd()}/src/assets/svg
ssrBoolean渲染模式, 其它正常情况很少情况会用到这种方式! 其实你可以直接用 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>

组件参数说明

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

版本描述:

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

nuxt >= ^3.4.1
☺️ 🤪😋😘
1.1.4

12 months ago

1.1.3

1 year ago

1.0.2

1 year ago

1.1.0

1 year ago

1.0.9

1 year ago

1.0.8

1 year ago

1.0.7

1 year ago

1.0.6

1 year ago

1.0.5

1 year ago

1.0.4

1 year ago

1.0.3

1 year ago

1.0.1

2 years ago

1.0.0

2 years ago