React 中 svg 中的样式特定路径元素

Question

我想知道如何在作为组件导入的整个 svg 中设置特定路径元素的样式...

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 850.39 773.76"><path d="M708.66,354.35C476.29,122,127.72,470.53,360.1,702.91l348.56,348.56,348.56-348.56C1289.6,470.53,941,122,708.66,354.35ZM1056.4,557.42c-6.14,32.85-23.71,64-52.21,92.46L708.66,945.41,413.13,649.88c-28.5-28.5-46.07-59.6-52.21-92.45-5.33-28.52-1.84-58.82,10.08-87.61,13.62-32.87,37.67-62.74,67.74-84.1,30.39-21.59,64.21-33,97.82-33,42.73,0,82.79,18.39,119.06,54.67l53,53,53-53C798,371.1,838,352.71,880.75,352.71c33.61,0,67.45,11.41,97.83,33,30.07,21.36,54.13,51.23,67.74,84.09C1058.25,498.6,1061.73,528.9,1056.4,557.42Z" transform="translate(-283.46 -277.71)"/><path class="likeInside" d="M413.13,649.88c-28.5-28.5-46.06-59.6-52.2-92.45-5.34-28.52-1.85-58.82,10.08-87.61,13.61-32.87,37.67-62.74,67.74-84.1,30.38-21.59,64.21-33,97.82-33,42.73,0,82.78,18.39,119.06,54.67l53,53,53-53C798,371.1,838,352.71,880.76,352.71c33.61,0,67.44,11.41,97.83,33,30.07,21.36,54.13,51.23,67.74,84.09,11.92,28.79,15.41,59.09,10.08,87.61-6.15,32.85-23.71,64-52.22,92.46L708.66,945.41Z" transform="translate(-283.46 -277.71)"/></svg>

我想用“likeInside”类设置路径的样式

我的 svg 是这样导入和使用的：

import {ReactComponent as Heart} from './heart2.svg'

它是这样使用的：

    <div className={styles.like}>
         <Heart className={styles.likeIcon}/>
    </div>

我正在使用 css 模块为我的元素设置样式，并且我没有使用类来创建我的组件（我正在使用箭头函数）。

你有什么想法吗？提前致谢！

Answer 1

1/ 创建一个组件并将svg代码粘贴到里面，然后在props中添加“className”（不要忘记className={className}）

Heart.js

import React from 'react';

export default function Heart({ className }) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 850.39 773.76">
      <path
        d="M708.66,354.35C476.29,122,127.72,470.53,360.1,702.91l348.56,348.56,348.56-348.56C1289.6,470.53,941,122,708.66,354.35ZM1056.4,557.42c-6.14,32.85-23.71,64-52.21,92.46L708.66,945.41,413.13,649.88c-28.5-28.5-46.07-59.6-52.21-92.45-5.33-28.52-1.84-58.82,10.08-87.61,13.62-32.87,37.67-62.74,67.74-84.1,30.39-21.59,64.21-33,97.82-33,42.73,0,82.79,18.39,119.06,54.67l53,53,53-53C798,371.1,838,352.71,880.75,352.71c33.61,0,67.45,11.41,97.83,33,30.07,21.36,54.13,51.23,67.74,84.09C1058.25,498.6,1061.73,528.9,1056.4,557.42Z"
        transform="translate(-283.46 -277.71)"
      />
      <path
        className={className}
        d="M413.13,649.88c-28.5-28.5-46.06-59.6-52.2-92.45-5.34-28.52-1.85-58.82,10.08-87.61,13.61-32.87,37.67-62.74,67.74-84.1,30.38-21.59,64.21-33,97.82-33,42.73,0,82.78,18.39,119.06,54.67l53,53,53-53C798,371.1,838,352.71,880.76,352.71c33.61,0,67.44,11.41,97.83,33,30.07,21.36,54.13,51.23,67.74,84.09,11.92,28.79,15.41,59.09,10.08,87.61-6.15,32.85-23.71,64-52.22,92.46L708.66,945.41Z"
        transform="translate(-283.46 -277.71)"
      />
    </svg>
  );
}

2/ 导入你的组件并添加一个类名

App.js

import React from 'react';
import './style.css';

import Heart from './Heart';

export default function App() {
  return (
    <Heart className="red-heart" />
  );
}

3/ 在你的 css 文件中创建类

style.css

.red-heart {
  fill: red;
}

查看演示：Here