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
#47,163
Topics of expertise
i18next
Nuxt.js
server-...
vue-rou...
firebas...
chartjs
vue3
ssr
Location
Poland
576 Stars 77 Forks MIT License 119 Commits 52 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 47,163
JavaScr...
vue3
Nuxt.js
vuex
76 commits
# 282,132
JavaScr...
vue3
vue-com...
svg
6 commits
# 379,153
JavaScr...
vue3
vue-com...
svg
2 commits
# 198
nextjs
postman...
graphql...
rng
2 commits
# 176,195
JavaScr...
knockou...
mvvm-fr...
Webpack
2 commits
# 218,289
JavaScr...
vue3
Nuxt.js
Webpack
1 commit
# 188,881
JavaScr...
vue3
Nuxt.js
Webpack
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.