Question

在创建返回svg的功能组件时出现错误。这里发生了什么？这是代码：

import React from 'react';

const TwitterIcon = () => {
  return (
    <svg viewBox="328 355 335 276" xmlns="http://www.w3.org/2000/svg">
    <path d="M 630, 425A 195, 195 0 0 1 331, 600A 142, 142 0 0 0 428, 570A  70,  70 0 0 1 370, 523 A  70,  70 0 0 0 401, 521A  70,  70 0 0 1 344, 455 A  70,  70 0 0 0 372, 460A  70,  70 0 0 1 354, 370A 195, 195 0 0 0 495, 442A  67,  67 0 0 1 611, 380 A 117, 117 0 0 0 654, 363A  65,  65 0 0 1 623, 401A 117, 117 0 0 0 662, 390A  65,  65 0 0 1 630, 425Z"
      style= {styles.fill}/>
  </svg>
  );
}

    const styles = {
  fill: "fill: skyblue"
}

export default TwitterIcon;

基本上我想使用svg作为组件。如果这不能解决，请告诉我在react中使用svg的另一种方法。我是新手

Answer 1

您需要在svg元素中添加fill属性，如下所示，

import React from "react";

const TwitterIcon = () => {
  const { fill, width, height } = styles;
  return (
    <svg
      viewBox="328 355 335 276"
      height={height}
      width={width}
      xmlns="http://www.w3.org/2000/svg"
      fill={fill}
    >
      <path d="M 630, 425A 195, 195 0 0 1 331, 600A 142, 142 0 0 0 428, 570A  70,  70 0 0 1 370, 523 A  70,  70 0 0 0 401, 521A  70,  70 0 0 1 344, 455 A  70,  70 0 0 0 372, 460A  70,  70 0 0 1 354, 370A 195, 195 0 0 0 495, 442A  67,  67 0 0 1 611, 380 A 117, 117 0 0 0 654, 363A  65,  65 0 0 1 623, 401A 117, 117 0 0 0 662, 390A  65,  65 0 0 1 630, 425Z" />
    </svg>
  );
};

const styles = {
  fill: "grey",
  width: 210,
  height: 500
};
export default TwitterIcon;

工作codesandbox

Answer 2

style="#3BA9EE"应该做什么？这不是您指定样式的方式。参见https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/style

执行类似<path ... style={{stroke-width: "2"}} />

的操作

Answer 3

样式必须声明要为其分配值的属性，我猜您想做类似style="stroke: #3BA9EE"的事情。

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/style

错误：`style`属性需要从样式属性到值而不是字符串的映射

3 个答案: