1414## Features
1515
1616* Full support of SVGs as components. Import them like your Vue SFCs
17+ * Use Vue bindings as you'd do it with normal components
1718* Built on top of [ svg-to-vue-component] ( https://github.com/egoist/svg-to-vue-component )
1819* Nuxt 2 (and only Nuxt 2) support
1920* Fully tested!
@@ -31,7 +32,7 @@ A [live demo](https://zxr9l743l3.sse.codesandbox.io/) is available through the [
3132{
3233 modules: [
3334 ' nuxt-svg-loader' ,
34- ],
35+ ]
3536}
3637```
3738
@@ -73,9 +74,11 @@ export default {
7374
7475## Configuration
7576
76- The plugin will work seamlessly out of the box. If you are in need of
77- configuring the loader options (eg for [ id prefixing] ( https://vue-svg-loader.js.org/faq.html#how-to-use-both-inline-and-external-svgs ) ),
78- you can do that:
77+ The plugin will work seamlessly out of the box.
78+ It will also include SVGO defaults to avoid collisions between your optimized SVG files!
79+
80+ If you want to configure the underlying loader (or SVGO), you can do that easily as well.
81+ (All options available [ here] ( https://github.com/egoist/svg-to-vue-component#loader-options ) )
7982
8083``` js
8184// file: nuxt.config.js
@@ -84,9 +87,27 @@ export default {
8487 // ...
8588 // Your loader options as svgLoader object
8689 svgLoader: {
87- svgo : {
90+ svgoConfig : {
8891 plugins: [
89- { prefixIds: true },
92+ { prefixIds: false }, // Disables prefixing for SVG IDs
93+ ]
94+ }
95+ }
96+ }
97+ ```
98+
99+ ## Migrating from 0.x
100+
101+ 1 . Update the deps (of course!)
102+ 2 . Rename ` svgo ` to ` svgoConfig `
103+ 3 . If you used id prefixing manually before, you can delete the config:
104+
105+ ``` js
106+ export default {
107+ svgLoader: {
108+ svgo: { // Rename to svgoConfig
109+ plugins: [
110+ { prefixIds: true } // Delete that line (or the whole svgLoader object if you don't have any other configurations)
90111 ]
91112 }
92113 }
0 commit comments