refactor: 💡 change config key from 'svgoOptions' to 'svgo' (#36)

* refactor: 💡 change nuxt config key from 'svgoOptions' to 'svgo'

BREAKING CHANGE: 🧨 Nuxt config key is now 'svgo', instead of 'svgoOptions'

* chore: 🤖 changeset

* chore: 🤖 update playground to use new 'svgo' config key

* fix: 🐛 use svgo-loader to run svgo with options with webpack

As discussed in
damianstasik/vue-svg-loader#156,
'vue-svg-loader' uses svgo v1. That project looks to be unmaintained,
with the latest beta release more than 2 years old. This PR disables the
svgo functionality of vue-svg-loader, instead relying on svg/svgo-loader
to perform optimizations, essentially making vue-svg-loader wrap the svg
content in template tags.

✅ Closes: #37

* docs: ✏️ update README with webpack-based tooling info

* docs(changeset): fix webpack SVG optimization with svgo-loader

.changeset/cold-stingrays-smile.md

@@ -0,0 +1,5 @@
+---
+'nuxt-svgo': major
+---
+
+Change Nuxt config key from 'svgoOptions' to 'svgo'. If you were using customized SVGO options, you'll need to update your `nuxt.config.ts` file to use `svgo` as the options key rather than `svgoOptions`. If you were using the default SVGO options, no change is necessary.

.changeset/serious-rules-lick.md

@@ -0,0 +1,5 @@
+---
+'nuxt-svgo': minor
+---
+
+fix webpack SVG optimization with svgo-loader

README.md

@@ -64,7 +64,10 @@ If your Nuxt app uses Vite, this module adds [vite-svg-loader](https://github.co
 
 ### Webpack
 
-If your Nuxt app uses Webpack, this module adds [vue-svg-loader](https://github.com/damianstasik/vue-svg-loader) to the underlying Webpack configuration. All due credit for `vue-svg-loader` to its author, [@damianstasik](https://github.com/damianstasik).
+If your Nuxt app uses Webpack, this module adds [vue-svg-loader](https://github.com/damianstasik/vue-svg-loader) and [svgo-loader](https://github.com/svg/svgo-loader) to the underlying Webpack configuration. As discussed in [this issue](https://github.com/damianstasik/vue-svg-loader#156), `vue-svg-loader` uses version 1 of SVGO. `vue-svg-loader` looks to be unmaintained, with the latest beta release more than 2 years old. We disable the SVGO functionality of `vue-svg-loader`, instead relying on `svgo-loader` to perform optimizations, essentially making `vue-svg-loader` wrap the svg content in `<template></template>` tags.
+
+All due credit for `vue-svg-loader` to its author, [@damianstasik](https://github.com/damianstasik).
+All due credit for `svgo-loader` to its author, [@svg](https://github.com/svg).
 
 ## Configuration
 
@@ -76,7 +79,7 @@ import { defineNuxtConfig } from 'nuxt'
 
 export default defineNuxtConfig({
   modules: ['nuxt-svgo'],
-  svgoOptions: {
+  svgo: {
     svgoConfig: {
       multipass: true,
       removeViewBox: false,

package.json

@@ -46,6 +46,7 @@
   },
   "dependencies": {
     "@nuxt/kit": "npm:@nuxt/kit-edge@latest",
+    "svgo-loader": "^3.0.1",
     "vite-svg-loader": "^3.3.0",
     "vue-loader": "^17.0.0",
     "vue-svg-loader": "0.17.0-beta.2"

playground/nuxt.config.ts

@@ -3,7 +3,7 @@ import NuxtSVGO from '..'
 
 export default defineNuxtConfig({
   modules: [NuxtSVGO],
-  svgoOptions: {
+  svgo: {
     svgo: true,
     defaultImport: 'component'
   }