New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

nuxt-svg-loader

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

nuxt-svg-loader - npm Package Compare versions

Comparing version

0.1.0
to
1.0.0

16

CHANGELOG.md

@@ -5,2 +5,18 @@ # Change Log

<a name="1.0.0"></a>
# [1.0.0](https://github.com/Developmint/nuxt-svg-loader/compare/v0.1.0...v1.0.0) (2019-01-09)
### Bug Fixes
* check if options is a thing ([ec9999f](https://github.com/Developmint/nuxt-svg-loader/commit/ec9999f))
### Features
* replaced vue-svg-loader with svg-to-vue-component ([#19](https://github.com/Developmint/nuxt-svg-loader/issues/19)) ([6061109](https://github.com/Developmint/nuxt-svg-loader/commit/6061109))
* use default options from svg-to-vue and add svgo backwards compat ([84a84b7](https://github.com/Developmint/nuxt-svg-loader/commit/84a84b7))
<a name="0.1.0"></a>

@@ -7,0 +23,0 @@ # [0.1.0](https://github.com/Developmint/nuxt-svg-loader/compare/v0.0.1...v0.1.0) (2018-11-05)

22

lib/module.js

@@ -5,7 +5,15 @@ const logger = require('consola').withScope('nuxt-svg-loader')

const { svgLoader: options } = this.options
if (options && options.svgo && !options.svgoConfig) {
options.svgoConfig = options.svgo
}
this.extendBuild(setupVueSvgLoader(options))
}
const svgRulePredicate = rule => rule.test && rule.test.test('.svg')
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 imageLoaderRule = config.module.rules.find(svgRulePredicate)

@@ -16,9 +24,17 @@ if (!imageLoaderRule) {

}
// 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)$/
// 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
}
]
})

@@ -25,0 +41,0 @@ }

16

package.json
{
"name": "nuxt-svg-loader",
"version": "0.1.0",
"version": "1.0.0",
"description": "",

@@ -58,4 +58,4 @@ "license": "MIT",

"dependencies": {
"consola": "^1.4.4",
"vue-svg-loader": "^0.11.0"
"consola": "^2.3.2",
"svg-to-vue-component": "^0.2.6"
},

@@ -68,15 +68,15 @@ "devDependencies": {

"codecov": "^3.1.0",
"eslint": "^5.8.0",
"eslint": "^5.9.0",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jest": "^21.26.2",
"eslint-plugin-jest": "^22.0.0",
"eslint-plugin-node": "^8.0.0",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^5.0.0-beta.3",
"eslint-plugin-vue": "^5.0.0-beta.4",
"get-port": "^4.0.0",
"husky": "^1.1.2",
"husky": "^1.2.0",
"jest": "^23.6.0",
"jsdom": "^13.0.0",
"nuxt-edge": "^2.3.0-25680860",
"nuxt-edge": "^2.4.0-25783204.eef2af35",
"standard-version": "^4.4.0"

@@ -83,0 +83,0 @@ },

39

README.md

@@ -17,3 +17,4 @@ # Nuxt SVG Loader - SVGs as components, also on the server side!

* 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)
* Use Vue bindings as you'd do it with normal components
* Built on top of [svg-to-vue-component](https://github.com/egoist/svg-to-vue-component)
* Nuxt 2 (and only Nuxt 2) support

@@ -24,3 +25,3 @@ * Fully tested!

A [live demo](https://zxr9l743l3.sse.codesandbox.io/) is available through the [CodeSandBox](https://codesandbox.io/s/github/Developmint/nuxt-svg-loader/tree/master) of the repo
A live demo is available through the [CodeSandBox](https://codesandbox.io/s/github/Developmint/nuxt-svg-loader/tree/master) of the repo.

@@ -36,3 +37,3 @@ ## Setup

'nuxt-svg-loader',
],
]
}

@@ -70,3 +71,3 @@ ```

WebpackLogo,
},
}
};

@@ -80,5 +81,7 @@ </script>

The plugin will work seamlessly out of the box. If you are in need of
configuring the loader options (eg for [id prefixing](https://vue-svg-loader.js.org/faq.html#how-to-use-both-inline-and-external-svgs)),
you can do that:
The plugin will work seamlessly out of the box.
It will also include SVGO defaults to avoid collisions between your optimized SVG files!
If you want to configure the underlying loader (or SVGO), you can do that easily as well.
(All options available [here](https://github.com/egoist/svg-to-vue-component#loader-options))

@@ -92,5 +95,5 @@ ```js

svgLoader: {
svgo: {
svgoConfig: {
plugins: [
{ prefixIds: true },
{ prefixIds: false } // Disables prefixing for SVG IDs
]

@@ -102,2 +105,20 @@ }

## Migrating from 0.x
1. Update the deps (of course!)
2. Rename `svgo` to `svgoConfig`
3. If you used id prefixing manually before, you can delete the config:
```js
export default {
svgLoader: {
svgo: { //Rename to svgoConfig
plugins: [
{ prefixIds: true } // Delete that line (or the whole svgLoader object if you don't have any other configurations)
]
}
}
}
```
## Development

@@ -104,0 +125,0 @@