1. SVG Inline Loader for Webpack

这个 Webpack loader 将 SVG 作为模块进行内联。如果您使用Adobe 套件或 Sketch 来导出 SVG，您将得到自动生成的、不需要的外壳。这个加载程序也为您删除了它。

1.1. 安装

npm install svg-inline-loader --save-dev

1.2. 配置

简单地添加配置对象到 module.loaders，像这样

    {
        test: /\.svg$/,
        loader: 'svg-inline-loader'
    }

[warning] 警告：

你应该只通过 module.loaders 或 require('!...') 配置此 loader 一次。参见 #15获取更多细节。

1.3. 查询选项

`removeTags: boolean`

删除指定的标记及其子元素。您可以通过设置 removingTags 查询数组来指定标记。

默认值: removeTags: false

`removingTags: [...string]`

[warning] 警告：

这个选项只有在 removeTags: true 时才可用。

默认值: removingTags: ['title', 'desc', 'defs', 'style']

`warnTags: [...string]`

警告标签, 例如: ['desc', 'defs', 'style']

默认: warnTags: []

`removeSVGTagAttrs: boolean`

从 <svg /> 移除 width 和 height 属性。

默认值: removeSVGTagAttrs: true

`removingTagAttrs: [...string]`

从 <svg /> 中移除属性。

默认: removingTagAttrs: []

`warnTagAttrs: [...string]`

在控制台发出关于内部 <svg /> 属性的警告

默认值: warnTagAttrs: []

`classPrefix: boolean || string`

添加一个前缀到 svg 文件的 clas s名，以避免碰撞。

默认值: classPrefix: false

`idPrefix: boolean || string`

添加一个前缀到 svg 文件的id，以避免碰撞。

default: idPrefix: false

1.4. 示例用法

// 使用默认的哈希前缀 (__[hash:base64:7]__)
var logoTwo = require('svg-inline-loader?classPrefix!./logo_two.svg');

// 使用自定义字符串
var logoOne = require('svg-inline-loader?classPrefix=my-prefix-!./logo_one.svg');

// 使用自定义字符串和哈希
var logoThree = require('svg-inline-loader?classPrefix=__prefix-[sha512:hash:hex:5]__!./logo_three.svg');

参见 loader-utils 查看 hash 选项。

更好的用法是通过 module.loaders :

    {
        test: /\.svg$/,
        loader: 'svg-inline-loader?classPrefix'
    }

1.5. 维护者

Juho Vepsäläinen

Joshua Wiens

Kees Kluskens

Sean Larkin

svg-inline-loader