1.把svg当图片使用
方式:
import x from 'xx/xx.svg'
const xxx=()=>{//react函数组件,你懂的
return (
<img src={x}>
)
}
改图片颜色不是很方便,要去svg里面手动地把fill改掉
2.使用svg-sprite-loader
//webpack.config.js rules加个
{
test: /\.svg$/,
use: [
{ loader: 'svg-sprite-loader', options: {} },
{
loader: 'svgo-loader', options: {}
}
]
},
//使用
import x from 'xx/xx.svg'
console.log(x)//注意这一步
<svg>//可以直接<svg fill="">
<use xlinkHref="#id">
//id就是文件名
</svg>
这loader干了什么? 把引入的所有svg合并成一个大的svg标签,里面分别是对应的svg symbols标签
为什么一定要把x console出来呢?(import的时候)
tree Shaking
根据代码分析并没有用到这个x,所以会把它从树上摇下来。
ps:(所以用require吧)