关于svg
HTML页面常用加载svg图片方式：
- HTML元素
// data 和 type 至少指定一项
<object data = './public/icon.svg' width='20' height='20' name='svg' type='image/svg+xml' usemap="#nameOfMap" ></object>
- HTML元素(不推荐)
- iframe
<iframe src="./location-1.svg" frameborder="0" style="background-color: #666;"></iframe>
- HTML元素
- CSS[background-image]属性
react-svg
在react项目中使用svg,建议使用react-svg.
react-svg即一个封装后的React组件。它的目的在于利用SVGinjector把SVG添加到DOM中。
import React from 'react';
import ReactDOM from 'react-dom';
import ReactSVG from 'react-svg';
ReactDOM.render(
<ReactSVG
path="atomic.svg"
callback={svg => console.log(svg)}
className="class-name"
wrapperClassName="wrapper-class-name"
/>,
document.querySelector('.Root')
);
在实际开发中，使用上面的方法插入svg同样繁琐。利用react-svg-loader插件可以简化上述过程：
// 不使用webpack
import Image1 from 'react-svg-loader!./image1.svg';
// 使用webpack配置了react-svg-loader
import Image2 from './image1.svg';
// 像普通react组件那样使用它， react-svg-loader会在自动将它替换为DOM
<Image1 width={50} height={50}/>
<Image2 width={50} height={50}/>
webpack中设置：
{
test: /\.svg$/,
use: [
{loader: 'babel-loader'}
{
loader: 'react-svg-loader'
}
]
}
react-svg-loader内部流程
输入svg -> 使用SVGO进行SVG优化 -> 编译转换
因此webpack中可以配置SVGO参数
{
test: /\.svg$/,
use: [
{loader: 'babel-loader'}
{
loader: 'react-svg-loader',
options:{
svgo: [
{
removeTitle: false
}
]
}
}
]
}