1. svgo-loader
svgo loader for webpack
svgo-loader
Package: svgo-loader
Created by: svg
Last modified: Sat, 21 Jan 2023 06:39:04 GMT
Version: 4.0.0
License: MIT
Downloads: 1,166,243
Repository: https://github.com/svg/svgo-loader

Install

npm install svgo-loader
yarn add svgo-loader

svgo loader for webpack

Install

$ npm install svgo-loader --save-dev

... or with Yarn

$ yarn add svgo-loader -D

Usage

Documentation: Using loaders

 module.exports = {
  ...,
  module: {
    rules: [
      {
        test: /\.svg$/,
        type: 'asset',
        loader: 'svgo-loader'
      }
    ]
  }
}

By default svgo-loader uses config from svgo.config.js similar to svgo cli.
See how to configure svgo.

Specify configFile option to load custom config module:

 module.exports = {
  ...,
  module: {
    rules: [
      {
        test: /\.svg$/,
        type: 'asset',
        loader: 'svgo-loader',
        options: {
          configFile: './scripts/svgo.config.js'
        }
      }
    ]
  }
}

or to disable loading config:

 module.exports = {
  ...,
  module: {
    rules: [
      {
        test: /\.svg$/,
        type: 'asset',
        loader: 'svgo-loader',
        options: {
          configFile: false
        }
      }
    ]
  }
}

You can also specify options which override loaded from config

 module.exports = {
  ...,
  module: {
    rules: [
      {
        test: /\.svg$/,
        type: 'asset',
        loader: 'svgo-loader',
        options: {
          multipass: true,
          js2svg: {
            indent: 2,
            pretty: true,
          }
        }
      }
    ]
  }
}

This software is released under the terms of the MIT license.

Dependencies

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin