如何添加自定义svg图标？

时间：2017-05-30 07:07:12

标签： reactjs svg material-ui

我正在尝试在AppBar组件中使用svg图标。

我的svg是这样的：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 123.4 30">
  <path fill="#00B9A7" d="M7.6 14l5.6-9.6c-.7-1.1-1.3-2.3-2-3.4-.8-1.3-2.6-1.3-3.4 0L.3 14c-.4.6-.3 1.4 0 2l7.5 13c.8 1.3 2.6 1.3 3.4 0l2-3.4L7.6 16c-.3-.6-.3-1.4 0-2z"/>
  <path fill="#00BE28" d="M20.5 4.4c-.7-1.1-1.3-2.3-2-3.4-.8-1.3-2.6-1.3-3.4 0l-2 3.4c1.2 2.1 2.4 4.2 3.7 6.4l3.7-6.4zM13.2 25.6l2 3.4c.8 1.3 2.6 1.3 3.4 0l2-3.4-3.7-6.4-3.7 6.4z"/>
  <path fill="#009E4A" d="M15 16c-.4-.6-.4-1.4 0-2l1.9-3.3c-1.2-2.1-2.4-4.2-3.7-6.4L7.6 14c-.4.6-.3 1.4 0 2l5.6 9.6 3.7-6.4L15 16z"/>
  <path fill="#006DC8" d="M33.4 14c-2.5-4.3-5-8.7-7.5-13-.8-1.3-2.6-1.3-3.4 0l-2 3.4c1.9 3.2 3.7 6.4 5.6 9.6.3.6.3 1.4 0 2l-5.6 9.6 2 3.4c.8 1.3 2.6 1.3 3.4 0l7.5-13c.4-.6.4-1.4 0-2z"/>
  <path fill="#00682A" d="M26.1 14c-1.8-3.2-3.7-6.4-5.6-9.6l-3.7 6.4L15 14c-.4.6-.3 1.4 0 2l1.9 3.3 3.7 6.4 5.6-9.6c.2-.7.2-1.5-.1-2.1z"/>
  <g>
    <path opacity=".87" d="M51.5 15.7c0 3.5-2.8 6.1-6.2 6.1-3.4 0-6.2-2.6-6.2-6.1s2.8-6.2 6.2-6.2c3.4.1 6.2 2.7 6.2 6.2zm-9.9 0c0 2.4 1.7 4.1 3.7 4.1s3.7-1.7 3.7-4.1c0-2.4-1.7-4.1-3.7-4.1s-3.7 1.7-3.7 4.1zM59.7 11.9c-.2-.1-.7-.3-1.1-.3-2 0-3 1.9-3 4.3v5.7h-2.5V9.8h2.5v1.7c.3-1.1 1.6-1.9 3-1.9.6 0 1.3.2 1.7.4l-.6 1.9zM72.6 15.7c0 3.5-2.8 6.1-6.2 6.1-3.4 0-6.2-2.6-6.2-6.1s2.8-6.2 6.2-6.2c3.4.1 6.2 2.7 6.2 6.2zm-9.9 0c0 2.4 1.7 4.1 3.7 4.1s3.7-1.7 3.7-4.1c0-2.4-1.7-4.1-3.7-4.1-2.1 0-3.7 1.7-3.7 4.1zM84.8 21.7h-2.5v-6.6c0-2.4-.6-3.5-2.7-3.5-2.3 0-3.1 1.6-3.1 3.7v6.4H74V9.8h2.5v1.9c.3-1.1 1.7-2 3.1-2.1 2.3-.2 4 .6 4.7 2.5.5-1.6 2.1-2.4 3.5-2.5 3.2-.2 5.1 1.3 5.1 5.2v6.8h-2.5V15c0-2.4-.6-3.5-2.7-3.5s-2.9 1.3-3.1 3.2v7zM96.4 8.8c-.7 0-1.3-.6-1.3-1.4 0-.7.6-1.3 1.3-1.3.8 0 1.4.6 1.4 1.3 0 .8-.6 1.4-1.4 1.4zm1.2 12.9h-2.5V9.8h2.5v11.9zM110.1 20.1c-1.1 1.2-2.7 1.8-4.5 1.8-3.4 0-6.2-2.6-6.2-6.1s2.8-6.2 6.2-6.2c1.8 0 3.4.6 4.5 1.8l-1.7 1.5c-.7-.9-1.7-1.3-2.8-1.3-2 0-3.7 1.7-3.7 4.1 0 2.4 1.7 4.1 3.7 4.1 1.1 0 2.1-.4 2.8-1.3l1.7 1.6zM123.4 15.7c0 3.5-2.8 6.1-6.2 6.1-3.4 0-6.2-2.6-6.2-6.1s2.8-6.2 6.2-6.2c3.4.1 6.2 2.7 6.2 6.2zm-9.9 0c0 2.4 1.7 4.1 3.7 4.1s3.7-1.7 3.7-4.1c0-2.4-1.7-4.1-3.7-4.1s-3.7 1.7-3.7 4.1z"/>
  </g>
</svg>

我不确定如何在组件中使用它。我想将此图标用作左图标，但不显示。

文档说它包含path组件，但正如您在此处看到的那样，有许多路径。我不确定要放在AppBar组件中的内容。

有人能帮助我吗？

1 个答案:

答案 0 :(得分：0)

就像从组件渲染方法返回SVG标记一样简单。请记住，反应不支持烤肉串案例道具，因此您需要将每个转换为骆驼案例，如：“view-box”变为“viewBox”

class AppBar extends React.Component {
  render() {
    return (      
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 123.4 30'>
        <path fill='#00B9A7' d='M7.6 14l5.6-9.6c-.7-1.1-1.3-2.3-2-3.4-.8-1.3-2.6-1.3-3.4 0L.3 14c-.4.6-.3 1.4 0 2l7.5 13c.8 1.3 2.6 1.3 3.4 0l2-3.4L7.6 16c-.3-.6-.3-1.4 0-2z'/>
        <path fill='#00BE28' d='M20.5 4.4c-.7-1.1-1.3-2.3-2-3.4-.8-1.3-2.6-1.3-3.4 0l-2 3.4c1.2 2.1 2.4 4.2 3.7 6.4l3.7-6.4zM13.2 25.6l2 3.4c.8 1.3 2.6 1.3 3.4 0l2-3.4-3.7-6.4-3.7 6.4z'/>
        <path fill='#009E4A' d='M15 16c-.4-.6-.4-1.4 0-2l1.9-3.3c-1.2-2.1-2.4-4.2-3.7-6.4L7.6 14c-.4.6-.3 1.4 0 2l5.6 9.6 3.7-6.4L15 16z'/>
        <path fill='#006DC8' d='M33.4 14c-2.5-4.3-5-8.7-7.5-13-.8-1.3-2.6-1.3-3.4 0l-2 3.4c1.9 3.2 3.7 6.4 5.6 9.6.3.6.3 1.4 0 2l-5.6 9.6 2 3.4c.8 1.3 2.6 1.3 3.4 0l7.5-13c.4-.6.4-1.4 0-2z'/>
        <path fill='#00682A' d='M26.1 14c-1.8-3.2-3.7-6.4-5.6-9.6l-3.7 6.4L15 14c-.4.6-.3 1.4 0 2l1.9 3.3 3.7 6.4 5.6-9.6c.2-.7.2-1.5-.1-2.1z'/>
        <g> 
          <path opacity='.87' d='M51.5 15.7c0 3.5-2.8 6.1-6.2 6.1-3.4 0-6.2-2.6-6.2-6.1s2.8-6.2 6.2-6.2c3.4.1 6.2 2.7 6.2 6.2zm-9.9 0c0 2.4 1.7 4.1 3.7 4.1s3.7-1.7 3.7-4.1c0-2.4-1.7-4.1-3.7-4.1s-3.7 1.7-3.7 4.1zM59.7 11.9c-.2-.1-.7-.3-1.1-.3-2 0-3 1.9-3 4.3v5.7h-2.5V9.8h2.5v1.7c.3-1.1 1.6-1.9 3-1.9.6 0 1.3.2 1.7.4l-.6 1.9zM72.6 15.7c0 3.5-2.8 6.1-6.2 6.1-3.4 0-6.2-2.6-6.2-6.1s2.8-6.2 6.2-6.2c3.4.1 6.2 2.7 6.2 6.2zm-9.9 0c0 2.4 1.7 4.1 3.7 4.1s3.7-1.7 3.7-4.1c0-2.4-1.7-4.1-3.7-4.1-2.1 0-3.7 1.7-3.7 4.1zM84.8 21.7h-2.5v-6.6c0-2.4-.6-3.5-2.7-3.5-2.3 0-3.1 1.6-3.1 3.7v6.4H74V9.8h2.5v1.9c.3-1.1 1.7-2 3.1-2.1 2.3-.2 4 .6 4.7 2.5.5-1.6 2.1-2.4 3.5-2.5 3.2-.2 5.1 1.3 5.1 5.2v6.8h-2.5V15c0-2.4-.6-3.5-2.7-3.5s-2.9 1.3-3.1 3.2v7zM96.4 8.8c-.7 0-1.3-.6-1.3-1.4 0-.7.6-1.3 1.3-1.3.8 0 1.4.6 1.4 1.3 0 .8-.6 1.4-1.4 1.4zm1.2 12.9h-2.5V9.8h2.5v11.9zM110.1 20.1c-1.1 1.2-2.7 1.8-4.5 1.8-3.4 0-6.2-2.6-6.2-6.1s2.8-6.2 6.2-6.2c1.8 0 3.4.6 4.5 1.8l-1.7 1.5c-.7-.9-1.7-1.3-2.8-1.3-2 0-3.7 1.7-3.7 4.1 0 2.4 1.7 4.1 3.7 4.1 1.1 0 2.1-.4 2.8-1.3l1.7 1.6zM123.4 15.7c0 3.5-2.8 6.1-6.2 6.1-3.4 0-6.2-2.6-6.2-6.1s2.8-6.2 6.2-6.2c3.4.1 6.2 2.7 6.2 6.2zm-9.9 0c0 2.4 1.7 4.1 3.7 4.1s3.7-1.7 3.7-4.1c0-2.4-1.7-4.1-3.7-4.1s-3.7 1.7-3.7 4.1z'/>
        </g>
      </svg>      
    );
  }
}

ReactDOM.render(
  <AppBar />,
  document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

相关问题
最新问题