https://github.com/lovetingyuan/inline-svgo-loader

Use svgo to optimize svg file, transformed as inline string or data-uri or file.
https://github.com/lovetingyuan/inline-svgo-loader

data-uri inline limit loader optimize svg svgo webpack

Last synced: 3 months ago
JSON representation

Use svgo to optimize svg file, transformed as inline string or data-uri or file.

• Host: GitHub
• URL: https://github.com/lovetingyuan/inline-svgo-loader
• Owner: lovetingyuan
• License: mit
• Created: 2018-12-06T08:29:47.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T05:54:19.000Z (over 2 years ago)
• Last Synced: 2025-03-08T00:05:40.138Z (3 months ago)
• Topics: data-uri, inline, limit, loader, optimize, svg, svgo, webpack
• Language: JavaScript
• Homepage:
• Size: 647 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# inline-svgo-loader

Use [svgo](https://github.com/svg/svgo) to optimize svg file, transformed as **string** or **data-uri** or **file**.

[![npm version](https://img.shields.io/npm/v/inline-svgo-loader.svg)](https://www.npmjs.com/package/inline-svgo-loader)

[![Build Status](https://travis-ci.org/lovetingyuan/inline-svgo-loader.svg?branch=master)](https://travis-ci.org/lovetingyuan/inline-svgo-loader)

### Options

* `svgo`: [SVGO.Options](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/svgo/index.d.ts), configuration passed to svgo, see https://github.com/svg/svgo. (ps: `datauri` will be ignored.)

* `limit`: `number`, when optimized svg file size is larger than limit, will use `fallback` option.

* `fallback`: `{ loader: string, options: any }`, see above, default fallback is [`file-loader`](https://github.com/webpack-contrib/file-loader).

### Usage

```bash

npm install inline-svgo-loader --save-dev

```

```javascript

{

  module: {

    rules: [

      {

        test: /\.(svg)(\?.*)?$/,

        loader: 'inline-svgo-loader'，

        options: {

          svgo: {},

          limit: 4 * 1024,

          fallback: {

            loader: 'file-loader',

            options: { name: '[name].svg' }

          }

        }

      }

    ]

  }

}

```

#### support `data:image/svg+xml,`

Just append `datauri` query param to svg file path to support data url(`data:image/svg+xml,%3csvg...`, Not base64).

eg: in css `background-image: url('assets/some.svg?datauri')`.

This loader will ignore `datauri` in option `svgo`.