https://github.com/fjc0k/svg-to-symbol-loader

A webpack loader JUST to transform SVG files to symobl strings, then you can freely handle them.
https://github.com/fjc0k/svg-to-symbol-loader

svg svg-sprite svg-symbol webpack-loader

Last synced: 4 months ago
JSON representation

A webpack loader JUST to transform SVG files to symobl strings, then you can freely handle them.

• Host: GitHub
• URL: https://github.com/fjc0k/svg-to-symbol-loader
• Owner: fjc0k
• License: mit
• Created: 2018-05-18T09:44:48.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-06-03T13:35:39.000Z (over 6 years ago)
• Last Synced: 2024-10-15T17:17:54.221Z (4 months ago)
• Topics: svg, svg-sprite, svg-symbol, webpack-loader
• Language: JavaScript
• Homepage: http://npm.im/svg-to-symbol-loader
• Size: 72.3 KB
• Stars: 4
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svg-to-symbol-loader [![Travis](https://travis-ci.org/fjc0k/svg-to-symbol-loader.svg?branch=master)](https://travis-ci.org/fjc0k/svg-to-symbol-loader)

A webpack loader JUST to transform SVG files to symobl strings, then you can freely handle them.

__JUST SUPPORT WEBPACK 4.__

Rollup version: [fjc0k/rollup-plugin-svg-to-symbol](https://github.com/fjc0k/rollup-plugin-svg-to-symbol)

## Install

```bash

# Yarn

yarn add svg-to-symbol-loader -D

# npm

npm i svg-to-symbol-loader -D

```

## Usage

```js

// webpack.config.js

module.exports = {

  module: {

    rules: [

      {

        test: /\.svg$/,

        use: 'svg-to-symbol-loader'

      }

    ]

  }

}

```

```js

// sprite.js

import add from './svg/add.svg'

import close from './svg/close.svg'

export default [

  '',

  add,

  close,

  ''

].join('')

```

The default export just likes:

```html

  

    .....

    .....

  

```

## Options

- __extractId__

  - Type: `({ name }) => id`

  - Default: `({ filePath, name }) => name`

  - Desc: Use the function to custom symbol id. The `name` is the SVG filename without the extension. e.g.

```js

// webpack.config.js

{

  extractId({ name }) {

    return `icon-${name}`

  }

}

```

```js

import add from './svg/add.svg'

// the add likes:

// ...

```

- __svgo__

  - Type: `Object`

  - Default: [See here](./src/defaultSVGOPlugins.js)

  - Desc: The [svgo](https://github.com/svg/svgo) plugins.