在React中使用svg文件的正确姿势

开发中遇到的问题：

日常的开发中，我们经常会用到SVG的文件，但是很多时候，我们可能是把SVG当成图片来使用，这种方式其实会失去使用SVG的优势：
SVG图标如果是单色的，我们是可以修改它的颜色的。

React中使用SVG的正确姿势：

使用react-svg配合glamor作为组件来呈现SVG：

SVG数据，是一个200*200的icon，黑色

// demo:
function demo(props) {
    const offStyle = css({
        // 注意这里有个空格!
        ' svg': {
            height: '24px',
            width: '24px',
            // 填充的颜色：red
            fill: 'red',
        },
    });
    return (
        <ReactSVG style={{ height: '24px' }} src="https://juejin.cn/post/off.svg" {...offStyle} />
    )
}
复制代码

最后的呈现效果：

HTML中渲染的svg标签：