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

About the developer

Global Rank
#55,452
Topics of expertise
vite
Nuxt.js
hmr
hot-rel...
server-...
vue-rou...
vue3
ssr
Location
Poland
515 Stars 66 Forks MIT License 119 Commits 34 Opened issues

Description

🔨 webpack loader that lets you use SVG files as Vue components

Services available

!
?

Need anything else?

Contributors list

# 55,452
HTML
vue3
Nuxt.js
vuex
76 commits
# 294,056
JavaScr...
vue3
vue-com...
svg
6 commits
# 393,644
JavaScr...
vue3
vue-com...
svg
2 commits
# 181
nextjs
postman...
graphql...
angular...
2 commits
# 166,554
CSS
knockou...
mvvm-fr...
vue3
2 commits
# 221,672
vue3
Nuxt.js
Webpack
webpack...
1 commit
# 184,786
vue3
Nuxt.js
Webpack
HTML
1 commit

vue-svg-loader

webpack loader that lets you use SVG files as Vue components

Documentation - FAQ

Installation

npm i -D [email protected]

yarn add --dev [email protected]

Basic configuration

webpack

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          'vue-loader',
          'vue-svg-loader',
        ],
      },
    ],
  },
};

Vue CLI

module.exports = {
  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg');

svgRule.uses.clear();

svgRule
  .use('vue-loader')
  .loader('vue-loader') // or `vue-loader-v16` if you are using a preview support of Vue 3 in Vue CLI
  .end()
  .use('vue-svg-loader')
  .loader('vue-svg-loader');

}, };

Nuxt.js (1.x / 2.x)

module.exports = {
  build: {
    extend: (config) => {
      const svgRule = config.module.rules.find(rule => rule.test.test('.svg'));

  svgRule.test = /\.(png|jpe?g|gif|webp)$/;

  config.module.rules.push({
    test: /\.svg$/,
    use: [
      'vue-loader',
      'vue-svg-loader',
    ],
  });
},

}, };

Example usage

License

FOSSA Status

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.