返回介绍

svg-inline-loader

发布于 2019-05-27 04:54:29 字数 4149 浏览 1073 评论 0 收藏 0

This Webpack loader inlines SVG as module. If you use Adobe suite or Sketch to export SVGs, you will get auto-generated, unneeded crusts. This loader removes it for you, too.

安装

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

配置

只需加载配置对象到 module.loaders 像下面这样。

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

警告: 这个loader你应只配置一次,通过 module.loaders 或者 require('!...') 配置。 更多细节参考 #15

Query 选项

#

删除指定的标签和它的子元素,你可以指定标签通过设置 removingTags 查询多个。

默认值: removeTags: false

removingTags: [...string]

警告: 你指定 removeTags: true 时,它才会执行。

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

warnTags: [...string]

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

默认值: warnTags: []

removeSVGTagAttrs: boolean

删除 <svg />widthheight 属性。

默认值: removeSVGTagAttrs: true

removingTagAttrs: [...string]

删除内部的 <svg />的属性。

默认值: removingTagAttrs: []

warnTagAttrs: [...string]

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

默认值: warnTagAttrs: []

classPrefix: boolean || string

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

默认值: classPrefix: false

idPrefix: boolean || string

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

默认值: idPrefix: false

使用示例

// 使用默认 hashed prefix (__[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');

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

hash 操作请参照 loader-utils

通过 module.loaders 优先使用:

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文