Webpack2 - 如何内联 SVG 文件答案

【问题标题】：Webpack2 - How to inline an SVG fileWebpack2 - 如何内联 SVG 文件
【发布时间】：2017-02-05 18:54:28
【问题描述】：

在webpack.config.js 中我正在使用以下loader：

{
  test: /\.svg$/,
  use: [ 'file-loader' ]
}

然后在我的component:

import icon from '../img/icons/menu.svg'

但是，console.log(icon) // 58f714c05099311f302aeb7d346be056.svg 表明 icon 的值只是一个文件名。

有没有办法导入原始的svg？

更新：

使用url-loader 将svg 导入为base64 字符串。

<img src="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ibWVudS1pY29uIiB3aWR0aD0iMzBweCIgaGVpZ2h0PSIzMHB4IiB2aWV3Qm94PSIwIDAgMzAgMzAiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik00LDEwaDI0YzEuMTA0LDAsMi0wLjg5NiwyLTJzLTAuODk2LTItMi0ySDRDMi44OTYsNiwyLDYuODk2LDIsOFMyLjg5NiwxMCw0LDEweiBNMjgsMTRINGMtMS4xMDQsMC0yLDAuODk2LTIsMiAgczAuODk2LDIsMiwyaDI0YzEuMTA0LDAsMi0wLjg5NiwyLTJTMjkuMTA0LDE0LDI4LDE0eiBNMjgsMjJINGMtMS4xMDQsMC0yLDAuODk2LTIsMnMwLjg5NiwyLDIsMmgyNGMxLjEwNCwwLDItMC44OTYsMi0yIFMyOS4xMDQsMjIsMjgsMjJ6Ii8+PC9zdmc+Cg==">

但是，这也不理想，因为我无法使用 CSS 设置 svg 的样式。

【问题讨论】：

标签： javascript reactjs svg webpack webpack-2

【解决方案1】：

module.loaders =  ...
  {
      test: /\.(svg)$/,
      loader: 'raw-loader'
  }

这是因为您使用的是内联 svg。 Ref

【讨论】：

【解决方案2】：

您可以通过插件https://github.com/kisenka/svg-fill-loader 使用 svg 作为背景图片：

background-image: url('./styles/images/shark.svg?fill=$ddd');
background-size: cover;
width: 330px;
height: 250px;

background-size: cover; svg 将横跨容器，因此您可以调整大小，而fill 您可以更改 svg 的颜色。

【讨论】：