React：渲染内联 svg 图标答案

【问题标题】：React: render inline svg iconReact：渲染内联 svg 图标
【发布时间】：2016-07-15 16:43:38
【问题描述】：

我有这个内嵌 svg 图标的代码：

@Icon = React.createClass
  render: ->
    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
      <title>img</title>
      <g stroke-width="2" stroke="#0070D9" fill="none" fill-rule="evenodd">
        <path d="M2 1h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z"/>
        <path d="M1.652 14.514l4.956-6.279 5.448 5.579 6.398-5.579M13 3.95a2.05 2.05 0 1 1 0 4.1 2.05 2.05 0 0 1 0-4.1z"/>
      </g>
    </svg>

但是反应跳过所有带有-的属性，例如：stroke-width="2"

【问题讨论】：

尝试查看控制台。 React 通常会警告不兼容的属性并建议一个操作（删除、重命名）。在您的情况下，正如 Lazarev 所指出的那样，这是一个骆驼问题。您也可以删除不支持的xmlns。

标签： svg reactjs

【解决方案1】：

使用camelCase。例如：strokeWidth 而不是 stroke-width。我用工作示例制作了fiddle。

【讨论】：