Socket
Socket
Sign inDemoInstall

svgo-loader

Package Overview
Dependencies
Maintainers
2
Versions
16
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

svgo-loader

svgo loader for webpack


Version published
Weekly downloads
205K
increased by1.8%
Maintainers
2
Weekly downloads
 
Created

What is svgo-loader?

svgo-loader is an npm package that optimizes SVG files by using the SVGO (SVG Optimizer) library. It is typically used as a loader in webpack configurations to automatically optimize SVG files during the build process, reducing file size and improving performance.

What are svgo-loader's main functionalities?

Basic SVG Optimization

This feature allows you to optimize SVG files by applying various SVGO plugins. The code sample demonstrates a basic webpack configuration that uses svgo-loader to remove titles, convert colors, and disable path data conversion.

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'svgo-loader',
            options: {
              plugins: [
                { removeTitle: true },
                { convertColors: { shorthex: false } },
                { convertPathData: false }
              ]
            }
          }
        ]
      }
    ]
  }
};

Custom Plugin Configuration

This feature allows you to customize the SVGO plugins used during the optimization process. The code sample shows how to configure svgo-loader to remove dimensions and specific attributes like stroke and fill from SVG files.

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'svgo-loader',
            options: {
              plugins: [
                { removeDimensions: true },
                { removeAttrs: { attrs: '(stroke|fill)' } }
              ]
            }
          }
        ]
      }
    ]
  }
};

Integration with Other Loaders

This feature demonstrates how svgo-loader can be integrated with other loaders like babel-loader in a webpack configuration. The code sample shows a setup where SVG files are first processed by babel-loader and then optimized by svgo-loader.

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          'babel-loader',
          {
            loader: 'svgo-loader',
            options: {
              plugins: [
                { removeViewBox: false }
              ]
            }
          }
        ]
      }
    ]
  }
};

Other packages similar to svgo-loader

Keywords

FAQs

Package last updated on 21 Jan 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc