Nerd Party Madness

    svg-to-symbol-loader

    1.1.3 • Public • Published

    svg-to-symbol-loader Travis

    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

    Install

    npm i svg-to-symbol-loader

    DownloadsWeekly Downloads

    55

    Version

    1.1.3

    License

    MIT

    Unpacked Size

    7.97 kB

    Total Files

    7

    Last publish

    Collaborators

    • funch