Super simple svg loading module for Nuxt.js
This package is for loading SVG's into Nuxt.js pages. It allows you to import .svg
files in multiple ways depending on the resource query you provide. Currently, this allows you to do the following:
file.svg
- normal import usingfile-loader
file.svg?data
- base64 data url import usingurl-loader
file.svg?inline
- inline import usingvue-svg-loader
file.svg?raw
- raw html import usingraw-loader
file.svg?sprite
- SVG sprite usingsvg-sprite-loader
npm install --save-dev @nuxtjs/svg
// nuxt.config.js
export default {
buildModules: ["@nuxtjs/svg"],
};
And that's it! You don't have to install anything else, you're ready to go.
// nuxt.config.js
export default {
svg: {
vueSvgLoader: {
// vue-svg-loader options
},
svgSpriteLoader: {
// svg-sprite-loader options
},
fileLoader: {
// file-loader options
}
}
};
The usage examples are documented as:
<!-- Nuxt.js code -->
<!-- Outputted html -->
<template>
<img src="~assets/nuxt.svg" />
</template>
<img src="/_nuxt/9405b9978eb50f73b53ac1326b93f211.svg" />
<template>
<img src="~assets/nuxt.svg?data" />
</template>
<img src="data:image/svg xml;base64,P...2h913j1g18h98hr" />
<template>
<NuxtLogo />
</template>
<script>
import NuxtLogo from "~/assets/nuxt.svg?inline";
export default {
components: { NuxtLogo },
};
</script>
<svg xmlns="http://www.w3.org/2000/svg"><path></path></svg>
Load the raw SVG data as HTML using raw-loader
:
<template>
<div v-html="rawNuxtLogo" />
</template>
<script>
import rawNuxtLogo from "~/assets/nuxt.svg?raw";
export default {
data() {
return { rawNuxtLogo };
},
};
</script>
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 298">
<g fill-rule="nonzero" fill="none"><path></path></g>
</svg>
</div>
<template>
<svg :viewBox="spriteNuxtLogo.viewBox">
<use :xlink:href="'#' spriteNuxtLogo.id"></use>
</svg>
</template>
<script>
import spriteNuxtLogo from "~/assets/nuxt.svg?sprite";
export default {
data() {
return { spriteNuxtLogo };
},
};
</script>
<svg viewBox="0 0 400 298">
<use xlink:href="#nuxt--sprite"></use>
</svg>
To dynamically import an SVG, you can use the inline require()
syntax.
<template>
<div v-html="require(`../assets/${name}.svg?raw`)" />
</template>
<script>
export default {
props: {
name: { type: String, default: "image" },
},
};
</script>
This example uses
raw-loader
.
To render an SVG without wrapper element and the use of v-html
, a combination of dynamic components and ?inline
can be used. See #72 for context.
<template>
<component :is="require(`../assets/${name}.svg?inline`)" />
</template>
<script>
export default {
props: {
name: { type: String, default: "image" },
},
};
</script>
This example uses
vue-svg-loader
.
In order for this module to work correctly, the default .svg
Nuxt.js webpack rule gets replaced with this handler.
The only difference between this and the handler is that there is no limit
for when file-loader
replaces url-loader
.
So when using the ?data
query, it will always use url-loader
regardless of file size, and when not using either resource query, it will always use file-loader
).
As this loader attempts to abstract webpack configuration from the process and make it easier to use multiple svg loaders, any contributions that add more svg loader methods to the configuration will be accepted wholeheartedly!
Copyright (c) Sam Holmes