CSSカスタムプロパティからアイコンシステムを作成した方法

CSSカスタム属性をICON SYSTEMに作成します

すべてのアイコンソースコードを備えたSASSリストがあります。各アイコンは、SASS関数を使用してデータURIとしてエンコードされ、ページのルートにあるカスタムプロパティに保存されます。

要するに

ここで提供するのは、CSSにSVGアイコンライブラリを直接作成するSASS機能です。

SVGソースコードは、SASS関数によってコンパイルされます。SASS関数は、データURIとしてエンコードし、アイコンをCSSカスタムプロパティに保存します。その後、外部画像と同じように、CSSのどこでもアイコンを使用できます。

これは私の個人的なウェブサイトコードから直接抽出された例です。

demo

<code>.c-filters__summary h2:after {
  content: var(--svg-down-arrow);
  position: relative;
  top: 2px;
  margin-left: auto;
  animation: closeSummary .25s ease-out;
}</code>

SASS構造

/ *すべてのアイコンソースコード */ $ svg-icons：（ バーガー： '＆lt; svg data-line = "" scss = "" viewbox = "0 ...' ）; / * sass関数エンコードアイコン */ @function svg（$ name）{ @return url（ 'data：image/svg xml、＃{$ encodedsvg}'）; } / *各アイコンをカスタムプロパティに保存します */ ：根 { @each $ name、$ code in $ svg-icons { -SVG-＃{$ name}：＃{svg（$ name）}; } } / *ボタンにハンバーガーアイコンを追加 */ .menu ::後{ コンテンツ：var（ - svg-burger）; }

このテクノロジーには利点と短所の両方があるので、プロジェクトにこのソリューションを実装する前に、これらの要因を必ず検討してください。


<code> pro <p>


</p>
<h4>SVGファイルにはHTTPリクエストは必要ありません。 </h4>
<ul>すべてのアイコンは1つの場所に保存されます。 <li>アイコンを更新する必要がある場合は、各HTMLテンプレートファイルをトラバースする必要はありません。 <li>アイコンはCSSでキャッシュされています。 <li>アイコンのソースコードを手動で編集できます。 <li>追加タグを追加してHTMLを汚染しません。 <li>まだCSSを使用して、アイコンの色またはいくつかの側面を変更できます。 <li>


<li>短所</li>


</ul>
<h4>CSSを使用してアニメーションを追加したり、SVGの特定の部分を更新したりすることはできません。 </h4>
<ul>アイコンが多いほど、コンパイルされたCSSファイルが大きくなります。 <li>



<li>私は主にこの手法をロゴやイラストではなく、アイコンに使用します。エンコードされたSVGは常に元のファイルよりも大きいため、</li>
</ul>を使用しています。</code>

以上がCSSカスタムプロパティからアイコンシステムを作成した方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。