Wondering what’s next for npm?Check out our public roadmap! »

    @nuxtjs/svg

    0.1.12 • Public • Published

    @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

    Installation

    npm install --save-dev @nuxtjs/svg
    // nuxt.config.js
    export default {
      modules: ["@nuxtjs/svg"],
    };

    And that's it! You don't have to install anything else, you're ready to go.

    Usage

    The usage examples are documented as:

    <!-- Nuxt.js code -->
    <!-- Outputted html -->

    file-loader

    <template>
      <img src="~assets/nuxt.svg" />
    </template>
    <img src="/_nuxt/9405b9978eb50f73b53ac1326b93f211.svg" />

    url-loader

    <template>
      <img src="~assets/nuxt.svg?data" />
    </template>
    <img src="data:image/svg+xml;base64,P...2h913j1g18h98hr" />

    vue-svg-loader

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

    raw-loader

    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>

    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!

    Also I'll be actively maintaining this project so if you'd rather just make a request for a loader or a feature; I'd be happy to take a look and see what I can do myself :)

    License

    MIT License

    Copyright (c) Sam Holmes

    Install

    npm i @nuxtjs/svg

    DownloadsWeekly Downloads

    25,165

    Version

    0.1.12

    License

    MIT

    Unpacked Size

    7.94 kB

    Total Files

    4

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar