コピー＆ペーストせずに HTML で SVG 要素を再利用する
2829 ワード
1 つのページで同じ SVG を複数回使用したい場合に遭遇することがあります.私の頭に浮かぶ最初の例は、ナビゲーション バーとフッターの両方でのソーシャル メディア アイコンの使用です.これが私がこれにアプローチする方法です
もちろん、そのままコピーして貼り付けることもできますが、HTML ドキュメントのサイズが大きくなり、FCP が遅くなります.
ファイルにエクスポートし、画像要素を介して読み込むこともできますが、フリックが発生する可能性があります.これは、特に要素がスクロールせずに見える範囲にある場合は望ましくありません.
function SomePage() {
return (
// Invisible symbol
<svg style={{ display: "none" }} version="2.0">
<defs>
<symbol id="linkedin-badge">
/* This is where you would put the contents of the SVG
(everything that is inside SVG tag except the tag itself) */
</symbol>
</defs>
<use href="#linkedin-badge" />
</svg>
// And this is how you would use it
<svg
width="32"
height="32"
viewBox="0 0 32 32"
version="2.0"
>
<use href="#linkedin-badge" />
</svg>
)
}
もちろん、そのままコピーして貼り付けることもできますが、HTML ドキュメントのサイズが大きくなり、FCP が遅くなります.
ファイルにエクスポートし、画像要素を介して読み込むこともできますが、フリックが発生する可能性があります.これは、特に要素がスクロールせずに見える範囲にある場合は望ましくありません.
Reference
この問題について(コピー＆ペーストせずに HTML で SVG 要素を再利用する), 我々は、より多くの情報をここで見つけました https://dev.to/bmstefanski/reusing-svg-elements-in-html-without-copy-pasting-it-3hfoテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol