Super simple svg loading module for Nuxt.js
npm install @nuxtjs/svg[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
_Super simple svg loading module for Nuxt.js_
- @nuxtjs/svg
- Introduction
- Installation
- Usage
- file-loader
- url-loader
- vue-svg-loader
- raw-loader
- svg-sprite-loader
- Caveats
- Contributing
- License
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 using file-loader
- file.svg?data - base64 data url import using url-loader
- file.svg?inline - inline import using vue-svg-loader
- file.svg?raw - raw html import using raw-loader
- file.svg?sprite - SVG sprite using svg-sprite-loader
``shell`
npm install --save-dev @nuxtjs/svg
`javascript`
// 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.
`javascript`
// 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:
`html`
`html`
`html`
`html`
`html`
`html`
`html
`
`html`
Load the raw SVG data as HTML using raw-loader:
`html
`
`html`
`html
`
`html`
To dynamically import an SVG, you can use the inline require() syntax.
` > This example uses raw-loader To render an SVG without wrapper element and the use of v-html ` > This example uses vue-svg-loader In order for this module to work correctly, the default .svg The only difference between this and the handler is that there is no limit So when using the ?data 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 [npm-version-src]: https://img.shields.io/npm/v/@nuxtjs/svg/latest.svg?style=flat-squarehtml
)" />
`., a combination of dynamic components and ?inline can be used. See #72 for context.html
`.Caveats
Nuxt.js webpack rule gets replaced with this handler. for when file-loader replaces url-loader. query, it will _always_ use url-loader regardless of file size, and when not using either resource query, it will always use file-loader`).Contributing
License
[npm-version-href]: https://npmjs.com/package/@nuxtjs/svg
[npm-downloads-src]: https://img.shields.io/npm/dt/@nuxtjs/svg.svg?style=flat-square
[npm-downloads-href]: https://npmjs.com/package/@nuxtjs/svg
[license-src]: https://img.shields.io/npm/l/@nuxtjs/svg.svg?style=flat-square
[license-href]: https://npmjs.com/package/@nuxtjs/svg