我如何用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 id="优点">优点</h4>


<ul>
<li>无需为SVG文件发出HTTP请求。</li>
<li>所有图标都存储在一个位置。</li>
<li>如果需要更新图标，则无需遍历每个HTML模板文件。</li>
<li>图标与CSS一起缓存。</li>
<li>您可以手动编辑图标的源代码。</li>
<li>它不会通过添加额外的标记来污染您的HTML。</li>
<li>您仍然可以使用CSS更改图标的颜色或某些方面。</li>
</ul>


<h4 id="缺点">缺点</h4>


<ul>
<li>您无法使用CSS为SVG的特定部分添加动画或更新。</li>
<li>图标越多，编译后的CSS文件就越大。</li>
</ul>



<p>我主要将此技术用于图标，而不是徽标或插图。编码后的SVG始终比其原始文件更大，因此我仍然使用<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174157496146935.jpg" class="lazy" alt="How I Made an Icon System Out of CSS Custom Properties "></p></code>

以上是我如何用CSS自定义属性制作图标系统的详细内容。更多信息请关注PHP中文网其他相关文章！