Awesome

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

Install

# Yarn
yarn add svg-to-symbol-loader -D

# npm
npm i svg-to-symbol-loader -D

Usage

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: 'svg-to-symbol-loader'
      }
    ]
  }
}

// sprite.js
import add from './svg/add.svg'
import close from './svg/close.svg'

export default [
  '<svg><defs>',
  add,
  close,
  '</defs></svg>'
].join('')

The default export just likes:

<svg>
  <defs>
    <symbol id="add">.....</symbol>
    <symbol id="close">.....</symbol>
  </defs>
</svg>

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.

// webpack.config.js
{
  extractId({ name }) {
    return `icon-${name}`
  }
}

import add from './svg/add.svg'
// the add likes:
// <symbol id="icon-add">...</symbol>

• svgo
  • Type: Object
  • Default: See here
  • Desc: The svgo plugins.