私のWebページにSVGを追加しようとしていますが、フォーマットがちょっと奇妙だと思います。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のどこかでそのファイルをホストする必要があるため、これは完璧ではありません。だから私は別の解決策を探し続けるつもりです。
?あなたは通常のコンポーネントを作成し、必要な小道具を渡すことができます – azium
あなたはどのようにあなたのアプリケーションを反応させるのですか? –
私はcreate-react-appを使用しています。しかし、私はすべてのアイコンのために専用のコンポーネントを作る必要はありません...やるべき痛みと維持する必要があります! :/ – Vadorequest