Need help with svg-module?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

nuxt-community
239 Stars 33 Forks MIT License 86 Commits 11 Opened issues

Description

Super simple svg loading module for Nuxt.js

Services available

!
?

Need anything else?

Contributors list

@nuxtjs/svg

npm version npm downloads License

Super simple svg loading module for Nuxt.js

Introduction

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

Installation

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.

Configuration

// nuxt.config.js
export default {
  svg: {
      vueSvgLoader: {
          // vue-svg-loader options
      },
      svgSpriteLoader: {
          // svg-sprite-loader options
      }
  }
};

Usage

The usage examples are documented as:


file-loader


url-loader


vue-svg-loader

raw-loader

Load the raw SVG data as HTML using

raw-loader
:

svg-sprite-loader

  

Dynamic imports

To dynamically import an SVG, you can use the inline

require()
syntax.

This example uses

raw-loader
.

Caveats

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
).

Contributing

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!

License

MIT License

Copyright (c) Sam Holmes

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.