Question

我有svg图标，该图标保存在html文件中。我已经从html文件中提取了它，并试图在我的React文件中运行它，但是它的动画不起作用。为了使动画正常工作，需要合并js和css文件。我该怎么做？如何加载其特定的js和CSS？

night_moon.svg

<svg version="1.1" id="clearNightIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="70px" height="70px" viewBox="0 0 70 70" enable-background="new 0 0 70 70" xml:space="preserve">
                    <g id="moon" data-svg-origin="32.599998474121094 36.19999885559082" style="transform: matrix(1, 0, 0, 1, 0, 0);">
                        <circle fill="#F1E5A1" cx="32.6" cy="36.2" r="20"></circle>
                        <path fill="#F5EEBC" d="M12.7,36.2c0,6.5,3.1,12.2,7.9,15.9c1.5,0.3,3,0.5,4.6,0.5c11,0,20-8.9,20-20c0-6.5-3.1-12.2-7.9-15.9
                            c-1.5-0.3-3-0.5-4.6-0.5C21.6,16.2,12.7,25.2,12.7,36.2z"></path>
                        <circle fill="#DBD093" cx="26.4" cy="26.6" r="2.7"></circle>
                        <circle fill="#DBD093" cx="20.2" cy="36.2" r="3.8"></circle>
                        <circle fill="#DBD093" cx="29.9" cy="36.2" r="2"></circle>
                    </g>
                    <g id="stars">
                        <path id="star6" fill="#FFFFFF" d="M11.5,25c-1.3,0.2-1.4,0.3-1.5,1.5c-0.2-1.3-0.3-1.4-1.5-1.5c1.3-0.2,1.4-0.3,1.5-1.5
                            C10.1,24.7,10.2,24.9,11.5,25z" style="opacity: 1;"></path>
                        <path id="star5" fill="#FFFFFF" d="M55.7,26.6c-1.3,0.2-1.4,0.3-1.5,1.5c-0.2-1.3-0.3-1.4-1.5-1.5c1.3-0.2,1.4-0.3,1.5-1.5
                            C54.3,26.3,54.4,26.4,55.7,26.6z" style="opacity: 1;"></path>
                        <path id="star4" fill="#FFFFFF" d="M61,34.2c-1.6,0.2-1.8,0.4-2,2c-0.2-1.6-0.4-1.8-2-2c1.6-0.2,1.8-0.4,2-2
                            C59.2,33.9,59.4,34,61,34.2z" style="opacity: 1;"></path>
                        <path id="star3" fill="#FFFFFF" d="M64.8,26.9c-2.1,0.3-2.3,0.5-2.6,2.6c-0.3-2.1-0.5-2.3-2.6-2.6c2.1-0.3,2.3-0.5,2.6-2.6
                            C62.5,26.4,62.7,26.6,64.8,26.9z" style="opacity: 1;"></path>
                        <path id="star2" fill="#FFFFFF" d="M18.6,16.5c-1.6,0.2-1.8,0.4-2,2c-0.2-1.6-0.4-1.8-2-2c1.6-0.2,1.8-0.4,2-2
                            C16.8,16.1,17,16.3,18.6,16.5z" style="opacity: 1;"></path>
                        <path id="star1" fill="#FFFFFF" d="M10.5,18.5c-1.6,0.2-1.8,0.4-2,2c-0.2-1.6-0.4-1.8-2-2c1.6-0.2,1.8-0.4,2-2
                            C8.6,18.1,8.8,18.3,10.5,18.5z" style="opacity: 0.93;"></path>
                    </g>
</svg>

Answer 1

您要做的就是导入，如下所示。 React将负责其余的工作。您需要使用CSS来决定其大小和在屏幕上的位置。

  private handleAllOptions(opts: Options[]) {
                         // now we can test 
                         // if our opts are empty or not
       if (opts && opts.length > 0) {
          // etc.
  }

然后将其渲染为组件。

import { ReactComponent as AnimationIcon } from "enter path here";

如何在reactjs中设置svg图标的样式？

1 个答案: