Skip to content

Commit 6061109

Browse files
wagerfieldTheAlexLichter
wagerfield
authored and
TheAlexLichter
committed
feat: replaced vue-svg-loader with svg-to-vue-component (#19)
1 parent dd73a97 commit 6061109

File tree

7 files changed

+150
-1342
lines changed

7 files changed

+150
-1342
lines changed

‎.eslintrc.js

+6-1
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,10 @@ module.exports = {
66
},
77
extends: [
88
'@nuxtjs'
9-
]
9+
],
10+
rules: {
11+
'vue/attribute-hyphenation': ['error', 'always', {
12+
ignore: ['viewBox']
13+
}]
14+
}
1015
}

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
## Features
1515

1616
* Full support of SVGs as components. Import them like your Vue SFCs
17-
* Built on top of [vue-svg-loader](https://github.com/visualfanatic/vue-svg-loader)
17+
* Built on top of [svg-to-vue-component](https://github.com/egoist/svg-to-vue-component)
1818
* Nuxt 2 (and only Nuxt 2) support
1919
* Fully tested!
2020

‎lib/module.js

+18-3
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,34 @@ export default function nuxtSvgLoader() {
66
}
77

88
const setupVueSvgLoader = options => (config) => {
9-
const imageLoaderRule = config.module.rules.find(rule => rule.test && /svg/.test(rule.test.toString()))
9+
// https://github.com/egoist/svg-to-vue-component#nuxtjs-2
10+
const svgRulePredicate = rule => rule.test && rule.test.test('.svg')
11+
const imageLoaderRule = config.module.rules.find(svgRulePredicate)
1012

1113
if (!imageLoaderRule) {
1214
logger.error('Could not modify image loader rule!')
1315
return
1416
}
17+
18+
// Don't process .svg files in default image rule
1519
// from https://github.com/nuxt/nuxt.js/blob/76b10d2d3f4e5352f1c9d14c52008f234e66d7d5/lib/builder/webpack/base.js#L203
1620
imageLoaderRule.test = /\.(png|jpe?g|gif|webp)$/
1721

22+
// Override svg-to-vue-component default options for prefixing ids
23+
const svgoConfig = Object.assign({}, {
24+
plugins: [{ prefixIds: false }]
25+
}, options && options.svgo)
26+
27+
// Add a new rule for .svg file
1828
config.module.rules.push({
1929
test: /\.svg$/,
20-
loader: 'vue-svg-loader',
21-
options
30+
use: [
31+
'vue-loader',
32+
{
33+
loader: 'svg-to-vue-component/loader',
34+
options: { svgoConfig }
35+
}
36+
]
2237
})
2338
}
2439

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
},
5757
"dependencies": {
5858
"consola": "^1.4.5",
59-
"vue-svg-loader": "^0.11.0"
59+
"svg-to-vue-component": "^0.2.6"
6060
},
6161
"devDependencies": {
6262
"@commitlint/cli": "^7.2.1",

‎test/__snapshots__/module.test.js.snap

+3-3
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ exports[`ssr correctly register SVG loader and load SVG correctly 1`] = `
1313
}</style>
1414
</head>
1515
<body data-n-head=\\"\\">
16-
<div data-server-rendered=\\"true\\" id=\\"__nuxt\\"><!----><div id=\\"__layout\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 1000 1000\\"><style></style><g id=\\"nuxt\\"><path d=\\"M317.9 852H3.7l408.1-704 408.1 704H507.7\\" fill=\\"#41b883\\"></path><path d=\\"M779.8 852h216.5l-354-608.5-351 608.5h216.5\\" fill=\\"#328170\\"></path><path d=\\"M651.2 852h159.5L549.9 403.8 291.3 852h159.5\\" fill=\\"#35495e\\"></path></g></svg></div></div><script>window.__NUXT__={layout:\\"default\\",data:[{}],error:null,serverRendered:true};</script><script src=\\"/_nuxt/runtime.js\\" defer></script><script src=\\"/_nuxt/pages/index.js\\" defer></script><script src=\\"/_nuxt/commons.app.js\\" defer></script><script src=\\"/_nuxt/app.js\\" defer></script>
16+
<div data-server-rendered=\\"true\\" id=\\"__nuxt\\"><!----><div id=\\"__layout\\"><svg viewBox=\\"1 2 3 4\\" width=\\"100\\"><g id=\\"nuxt\\"><path d=\\"M317.9 852H3.7l408.1-704 408.1 704H507.7\\" fill=\\"#41b883\\"></path><path d=\\"M779.8 852h216.5l-354-608.5-351 608.5h216.5\\" fill=\\"#328170\\"></path><path d=\\"M651.2 852h159.5L549.9 403.8 291.3 852h159.5\\" fill=\\"#35495e\\"></path></g></svg></div></div><script>window.__NUXT__={layout:\\"default\\",data:[{}],error:null,serverRendered:true};</script><script src=\\"/_nuxt/runtime.js\\" defer></script><script src=\\"/_nuxt/pages/index.js\\" defer></script><script src=\\"/_nuxt/commons.app.js\\" defer></script><script src=\\"/_nuxt/app.js\\" defer></script>
1717
</body>
1818
</html>
1919
"
@@ -32,7 +32,7 @@ exports[`ssr honor custom build.extend function 1`] = `
3232
}</style>
3333
</head>
3434
<body data-n-head=\\"\\">
35-
<div data-server-rendered=\\"true\\" id=\\"__nuxt\\"><!----><div id=\\"__layout\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 1000 1000\\"><style></style><g id=\\"nuxt\\"><path d=\\"M317.9 852H3.7l408.1-704 408.1 704H507.7\\" fill=\\"#41b883\\"></path><path d=\\"M779.8 852h216.5l-354-608.5-351 608.5h216.5\\" fill=\\"#328170\\"></path><path d=\\"M651.2 852h159.5L549.9 403.8 291.3 852h159.5\\" fill=\\"#35495e\\"></path></g></svg></div></div><script>window.__NUXT__={layout:\\"default\\",data:[{}],error:null,serverRendered:true};</script><script src=\\"/_nuxt/runtime.js\\" defer></script><script src=\\"/_nuxt/pages/index.js\\" defer></script><script src=\\"/_nuxt/commons.app.js\\" defer></script><script src=\\"/_nuxt/app.js\\" defer></script>
35+
<div data-server-rendered=\\"true\\" id=\\"__nuxt\\"><!----><div id=\\"__layout\\"><svg viewBox=\\"1 2 3 4\\" width=\\"100\\"><g id=\\"nuxt\\"><path d=\\"M317.9 852H3.7l408.1-704 408.1 704H507.7\\" fill=\\"#41b883\\"></path><path d=\\"M779.8 852h216.5l-354-608.5-351 608.5h216.5\\" fill=\\"#328170\\"></path><path d=\\"M651.2 852h159.5L549.9 403.8 291.3 852h159.5\\" fill=\\"#35495e\\"></path></g></svg></div></div><script>window.__NUXT__={layout:\\"default\\",data:[{}],error:null,serverRendered:true};</script><script src=\\"/_nuxt/runtime.js\\" defer></script><script src=\\"/_nuxt/pages/index.js\\" defer></script><script src=\\"/_nuxt/commons.app.js\\" defer></script><script src=\\"/_nuxt/app.js\\" defer></script>
3636
</body>
3737
</html>
3838
"
@@ -51,7 +51,7 @@ exports[`ssr honor custom loader options 1`] = `
5151
}</style>
5252
</head>
5353
<body data-n-head=\\"\\">
54-
<div data-server-rendered=\\"true\\" id=\\"__nuxt\\"><!----><div id=\\"__layout\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 1000 1000\\"><style></style><g id=\\"Nuxt_svg__nuxt\\"><path d=\\"M317.9 852H3.7l408.1-704 408.1 704H507.7\\" fill=\\"#41b883\\"></path><path d=\\"M779.8 852h216.5l-354-608.5-351 608.5h216.5\\" fill=\\"#328170\\"></path><path d=\\"M651.2 852h159.5L549.9 403.8 291.3 852h159.5\\" fill=\\"#35495e\\"></path></g></svg></div></div><script>window.__NUXT__={layout:\\"default\\",data:[{}],error:null,serverRendered:true};</script><script src=\\"/_nuxt/runtime.js\\" defer></script><script src=\\"/_nuxt/pages/index.js\\" defer></script><script src=\\"/_nuxt/commons.app.js\\" defer></script><script src=\\"/_nuxt/app.js\\" defer></script>
54+
<div data-server-rendered=\\"true\\" id=\\"__nuxt\\"><!----><div id=\\"__layout\\"><svg viewBox=\\"1 2 3 4\\" width=\\"100\\"><g id=\\"Nuxt_svg__nuxt\\"><path d=\\"M317.9 852H3.7l408.1-704 408.1 704H507.7\\" fill=\\"#41b883\\"></path><path d=\\"M779.8 852h216.5l-354-608.5-351 608.5h216.5\\" fill=\\"#328170\\"></path><path d=\\"M651.2 852h159.5L549.9 403.8 291.3 852h159.5\\" fill=\\"#35495e\\"></path></g></svg></div></div><script>window.__NUXT__={layout:\\"default\\",data:[{}],error:null,serverRendered:true};</script><script src=\\"/_nuxt/runtime.js\\" defer></script><script src=\\"/_nuxt/pages/index.js\\" defer></script><script src=\\"/_nuxt/commons.app.js\\" defer></script><script src=\\"/_nuxt/app.js\\" defer></script>
5555
</body>
5656
</html>
5757
"

‎test/fixture/pages/index.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<nuxt-logo/>
2+
<nuxt-logo viewBox="1 2 3 4" width="100" />
33
</template>
44

55
<script>

0 commit comments

Comments
 (0)