SVGのスタイル（ブラウザには適用されません）

Question

私のWebページにSVGを追加しようとしていますが、フォーマットがちょっと奇妙だと思います。

https://gist.github.com/Vadorequest/c329dec26e39a586e96df5f74c1d7d29?short_path=d29c6c9（あなたがソースコードとそこにレンダリングを見ることができます）

私が反応使用してこのファイルをロードしていますので、style一部が正しく理解されていません。ファイルを保存してブラウザに開くと、正常に動作します。しかし、を使って反応させると、暗い画像が表示されます。

import IconBook from "-!react-svg-loader!../assets/couverture-eBook-VF.svg"; 
... 
<IconBook height={250} /> 

このようなスタイルを置くのが標準ですか？新しいSVGのエクスポート方法を変えるべきでしょうか？私は実際にその形式とすべての可能性を知らない。編集1

---

：それは正しくロードされますにhttps://github.com/gilbarbara/react-inlinesvg

それは基本的にネットワークと何もオーバーSVGファイルをロードします。

は、私が興味を持って誰のための作業の回避策を見つけました。 （<styles>を含む）

悪い面では、アプリはCDNなどで利用可能でなければならないものに依存しています。 （あなたはあなたのアプリに埋め込まれたSVGを持っていないだろう。もしあなたが何かのスタンドアロンのアプリを望むなら、その中にすべてを組み込むことができるなら、それは本当に良いことではない）

良い面では、 SVGファイルを変更してそのまま使用し、ネットワーク経由でロードして、ブラウザのように表示します。

私はスタンドアロンのアプリケーション（基本的にはnpm run buildは私のアプリケーション全体でフォルダを生成します）が完成していないので、CDNのどこかでそのファイルをホストする必要があるため、これは完璧ではありません。だから私は別の解決策を探し続けるつもりです。

Answer 1

それは仕様が言うように、あなたのSVGファイル内のスタイルを持っている罰金です：

カスケーディングスタイルシート（CSS）は、HTMLやXMLで記述された文書のプレゼンテーション を記述するために使用されるスタイルシートです（ SVGやXHTMLのようなXML などの方言）。 CSSは、画面上、紙面上、スピーチ上、または他のメディア上で要素がどのようにレンダリングされるべきかを示します。ローダーでなぜわざわざ

https://developer.mozilla.org/en-US/docs/Web/CSS