From 606110939246b3c19ca9922462b76427eba48f9f Mon Sep 17 00:00:00 2001 From: Matthew Wagerfield Date: Wed, 9 Jan 2019 13:10:21 +0000 Subject: [PATCH] feat: replaced vue-svg-loader with svg-to-vue-component (#19) --- .eslintrc.js | 7 +- README.md | 2 +- lib/module.js | 21 +- package.json | 2 +- test/__snapshots__/module.test.js.snap | 6 +- test/fixture/pages/index.vue | 2 +- yarn.lock | 1452 ++---------------------- 7 files changed, 150 insertions(+), 1342 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index c8a9829..002daf1 100755 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -6,5 +6,10 @@ module.exports = { }, extends: [ '@nuxtjs' - ] + ], + rules: { + 'vue/attribute-hyphenation': ['error', 'always', { + ignore: ['viewBox'] + }] + } } diff --git a/README.md b/README.md index a5c1c4e..8ea2c70 100755 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ ## Features * Full support of SVGs as components. Import them like your Vue SFCs -* Built on top of [vue-svg-loader](https://github.com/visualfanatic/vue-svg-loader) +* Built on top of [svg-to-vue-component](https://github.com/egoist/svg-to-vue-component) * Nuxt 2 (and only Nuxt 2) support * Fully tested! diff --git a/lib/module.js b/lib/module.js index 4abbbf8..a8e102b 100644 --- a/lib/module.js +++ b/lib/module.js @@ -6,19 +6,34 @@ export default function nuxtSvgLoader() { } const setupVueSvgLoader = options => (config) => { - const imageLoaderRule = config.module.rules.find(rule => rule.test && /svg/.test(rule.test.toString())) + // https://github.com/egoist/svg-to-vue-component#nuxtjs-2 + const svgRulePredicate = rule => rule.test && rule.test.test('.svg') + const imageLoaderRule = config.module.rules.find(svgRulePredicate) if (!imageLoaderRule) { logger.error('Could not modify image loader rule!') return } + + // Don't process .svg files in default image rule // from https://github.com/nuxt/nuxt.js/blob/76b10d2d3f4e5352f1c9d14c52008f234e66d7d5/lib/builder/webpack/base.js#L203 imageLoaderRule.test = /\.(png|jpe?g|gif|webp)$/ + // Override svg-to-vue-component default options for prefixing ids + const svgoConfig = Object.assign({}, { + plugins: [{ prefixIds: false }] + }, options && options.svgo) + + // Add a new rule for .svg file config.module.rules.push({ test: /\.svg$/, - loader: 'vue-svg-loader', - options + use: [ + 'vue-loader', + { + loader: 'svg-to-vue-component/loader', + options: { svgoConfig } + } + ] }) } diff --git a/package.json b/package.json index 628bf01..7d2df7a 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,7 @@ }, "dependencies": { "consola": "^1.4.5", - "vue-svg-loader": "^0.11.0" + "svg-to-vue-component": "^0.2.6" }, "devDependencies": { "@commitlint/cli": "^7.2.1", diff --git a/test/__snapshots__/module.test.js.snap b/test/__snapshots__/module.test.js.snap index 5c8281b..f7cbc42 100644 --- a/test/__snapshots__/module.test.js.snap +++ b/test/__snapshots__/module.test.js.snap @@ -13,7 +13,7 @@ exports[`ssr correctly register SVG loader and load SVG correctly 1`] = ` } -
+
" @@ -32,7 +32,7 @@ exports[`ssr honor custom build.extend function 1`] = ` } -
+
" @@ -51,7 +51,7 @@ exports[`ssr honor custom loader options 1`] = ` } -
+
" diff --git a/test/fixture/pages/index.vue b/test/fixture/pages/index.vue index c2eada5..b5704e1 100644 --- a/test/fixture/pages/index.vue +++ b/test/fixture/pages/index.vue @@ -1,5 +1,5 @@