svg-sprite-vue-generator

Install

npm install svg-sprite-vue-generator -D

Usage

Inline mode

import FacebookSprite from './assets/facebook.sprite.svg'
import TwitterSprite from './assets/twitter.sprite.svg'
import wikipedia from './assets/wikipedia.svg'
// FacebookSprite will be a valid vue component, use it as an vue component
console.log(FacebookSprite)
// render as: <svg><use xlink:href="#facebook.sprite"></use></svg>
console.log(TwitterSprite)
// render as: <svg><use xlink:href="#twitter.sprite"></use></svg>
// wikipedia still be an normal asset url, use it as normal image asset url in html img tag or css background-image
console.log(wikipedia)
// log as: /static/img/wikipedia.77b80eb8.svg

Config

// vue.config.js
module.exports = {
 chainWebpack: config => {
 // default file-loader
 config.module.rule('svg')
 .exclude.add(/\.sprite\.(svg)(\?.*)?$/).end()
 // add svg-sprite-loader
 config.module.rule('svg-sprite')
 .test(/\.sprite\.(svg)(\?.*)?$/)
 .use('babel-loader').loader('babel-loader').end()
 .use('svg-sprite-loader').loader('svg-sprite-loader').tap(() => {
 return {
 runtimeGenerator: require.resolve('svg-sprite-vue-generator'),
 }
 }).end()
 .use('svgo-loader').loader('svgo-loader')
 }
}

Extract mode

import FacebookSprite from './assets/facebook.sprite.svg'
import TwitterSprite from './assets/twitter.sprite.svg'
import TwitterSpriteURL from './assets/twitter.sprite.svg?URL'
import wikipedia from './assets/wikipedia.svg'
// FacebookSprite will be a valid vue component, use it as an vue component
// It will be render as an normal img or svg tag with src to an an independent svg file(include all svg sprite)
console.log(FacebookSprite)
// render as: <svg><use xlink:href="/static/sprite.svg#facebook.sprite-usage"></use></svg>
// render as img: <img src="/static/sprite.svg#twitter.sprite--url-usage">
console.log(TwitterSprite)
// render as: <svg><use xlink:href="/static/sprite.svg#twitter.sprite-usage"></use></svg>
// TwitterSpriteURL will be an normal url, use it as normal image asset in html img tag or css background-image
console.log(TwitterSpriteURL)
// log as: /static/sprite.svg#twitter.sprite--url-usage
// wikipedia still be an normal asset, use it as normal image asset in html img tag or css background-image
console.log(wikipedia)
// log as: /static/img/wikipedia.77b80eb8.svg

Config

// vue.config.js
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin')
module.exports = {
 assetsDir: 'static',
 configureWebpack: {
 plugins: [
 // NOTE: for extract mode, un support https://github.com/JetBrains/svg-sprite-loader#plain-sprite
 new SpriteLoaderPlugin()
 ]
 },
 chainWebpack: config => {
 // default file-loader
 config.module.rule('svg')
 .exclude.add(/\.sprite\.(svg)(\?.*)?$/).end()
 // add svg-sprite-loader
 config.module.rule('svg-sprite')
 .test(/\.sprite\.(svg)(\?.*)?$/)
 .use('svg-sprite-loader').loader('svg-sprite-loader').tap(() => {
 return {
 runtimeGenerator: require.resolve('svg-sprite-vue-generator'),
 runtimeOptions: {
 // default render svg tag, set it true to render img tag
 extractCompTagImg: false,
 },
 extract: true,
 publicPath: '/static/'
 }
 }).end()
 .use('svgo-loader').loader('svgo-loader')
 }
}

TypeScript

declare module "*.sprite.svg" {
 import Vue, { VueConstructor } from 'vue'
 const content: VueConstructor<Vue>
 export default content
}

Runtime Options

{
 // default render svg tag, set it true to render img tag in extract mode
 extractCompTagImg: false,
 // bind any attributes, default is empty
 attrs: {},
 // set loading class, default is 'svg-sprite-loading'
 loadingClass: '',
 // set any class string, default is ''
 otherClass: '',
}

Note

Demo

npm run demo:serve