Skip to content
SVGs as components, also on the server side!
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib fix: check if options is a thing Jan 9, 2019
test fix: re-enable lazy-loading capabilities (#28) Jan 11, 2019
.editorconfig chore: init Oct 14, 2018
.eslintrc.js
.gitignore
.travis.yml chore: init Oct 14, 2018
CHANGELOG.md
LICENSE chore: init Oct 14, 2018
README.md docs: how to ignore svgs for eslint (#34) Jan 30, 2019
commitlint.config.js
package.json chore(release): 1.0.1 Jan 11, 2019
renovate.json
yarn.lock

README.md

Nuxt SVG Loader - SVGs as components, also on the server side!

npm (scoped with tag) npm Build Status codecov Dependencies js-standard-style thanks

📖 Release Notes

Features

  • Full support of SVGs as components. Import them like your Vue SFCs
  • Use Vue bindings as you'd do it with normal components
  • Built on top of svg-to-vue-component
  • Nuxt 2 (and only Nuxt 2) support
  • Fully tested!

Demo

A live demo is available through the CodeSandBox of the repo.

Setup

  • Add nuxt-svg-loader as a dependency using yarn or npm to your project
  • Add nuxt-svg-loader to modules section of nuxt.config.js
{
  modules: [
    'nuxt-svg-loader',
  ]
}
  • Now you can use your svg files like regular Vue components
<template>
  <nav>
    <a href="https://github.com/vuejs/vue">
      <VueLogo />
      Vue
    </a>
    <a href="https://github.com/svg/svgo">
      <SVGOLogo />
      SVGO
    </a>
    <a href="https://github.com/webpack/webpack">
      <WebpackLogo />
      webpack
    </a>
  </nav>
</template>
<script>
import VueLogo from '@/assets/svg/vue.svg';
import SVGOLogo from '@/assets/svg/svgo.svg';
import WebpackLogo from '@/assets/svg/webpack.svg';

export default {
  name: 'Example',
  components: {
    VueLogo,
    SVGOLogo,
    WebpackLogo,
  }
};
</script>
  • No more options are needed. It'll simply work

Configuration

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)

// file: nuxt.config.js

export default {
  // ...
  // Your loader options as svgLoader object
  svgLoader: {
    svgoConfig: {
      plugins: [
        { prefixIds: false } // Disables prefixing for SVG IDs
      ]
    }
  }
}

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:
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)
      ]
    }
  }
}

How to fix Eslint auto lint error

If you turn on Eslint on save by server, you should exclude .svg files of eslint-loader.

Example:

// nuxt.config.js
build: {
    extend(config, ctx) {
    // Run ESLint on save
    if (ctx.isDev && ctx.isClient) {
      config.module.rules.push({
        enforce: 'pre',
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        exclude: /(node_modules)||(.svg$)/ /* <--- here */
      })
    }
  }
}

Development

  • Clone this repository
  • Install dependencies using yarn install or npm install
  • Start development server using npm run dev

License

MIT License

Copyright (c) Alexander Lichter

You can’t perform that action at this time.