我如何用CSS自定義屬性製作圖標系統

將CSS自定義屬性打造為圖標系統

毫無疑問，SVG是網站圖標的最佳格式。無論屏幕像素密度如何，它都能提供清晰的圖標；您可以更改SVG的懸停樣式，甚至可以使用CSS或JavaScript為圖標添加動畫效果。

在網頁中包含SVG的方法有很多，每種技術都有其自身的優缺點。過去幾年，我一直使用Sass函數直接在我的CSS中導入圖標，避免弄亂我的HTML標記。

我有一個包含所有圖標源代碼的Sass列表。然後，每個圖標都使用Sass函數編碼為data URI，並存儲在頁面根目錄的自定義屬性中。

簡而言之

我在這裡提供的是一個Sass函數，它可以直接在您的CSS中創建一個SVG圖標庫。

SVG源代碼由Sass函數編譯，該函數將其編碼為data URI，然後將圖標存儲在CSS自定義屬性中。然後，您可以像使用外部圖像一樣，在CSS中的任何位置使用任何圖標。

這是從我的個人網站代碼中直接提取的一個示例：

<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結構

<code>/* 所有圖標源代碼 */
$svg-icons: (
  burger: '<svg data-line="" scss="" viewbox="0...'
);

/* 編碼圖標的Sass函數 */
@function svg($name) {
  @return url('data:image/svg xml, #{$encodedSVG} ');
}

/* 將每個圖標存儲到自定義屬性中 */
:root {
  @each $name, $code in $svg-icons {
    --svg-#{$name}: #{svg($name)};
  }
}

/* 在我的按鈕中添加漢堡圖標 */
.menu::after {
  content: var(--svg-burger);
}       



<p>此技術既有優點也有缺點，因此在項目中實施此解決方案之前，請務必考慮這些因素：</p>


<h4  >優點</h4>


<ul ><li>無需為SVG文件發出HTTP請求。 </li><li>所有圖標都存儲在一個位置。 </li><li>如果需要更新圖標，則無需遍歷每個HTML模板文件。 </li><li>圖標與CSS一起緩存。 </li><li>您可以手動編輯圖標的源代碼。 </li><li>它不會通過添加額外的標記來污染您的HTML。 </li><li>您仍然可以使用CSS更改圖標的顏色或某些方面。 </li></ul>


<h4  >缺點</h4>


<ul ><li>您無法使用CSS為SVG的特定部分添加動畫或更新。 </li><li>圖標越多，編譯後的CSS文件就越大。 </li></ul>



<p>我主要將此技術用於圖標，而不是徽標或插圖。編碼後的SVG始終比其原始文件更大，因此我仍然使用<img src=" data-src="https://img.php.cn/upload/article/000/000/000/174157496146935.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="How I Made an Icon System Out of CSS Custom Properties "></svg></code>

以上是我如何用CSS自定義屬性製作圖標系統的詳細內容。更多資訊請關注PHP中文網其他相關文章！