仅修改图片路径时，如何精简重复的CSS图标代码？

以下是几种可行的精简方案，可根据项目场景选择：

1. CSS变量+通用基类 #

这是最直接的纯CSS方案，把重复样式抽成通用基类，每个图标类仅定义路径变量：

/* 通用图标基类：所有重复样式只写一次 */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  content: '';
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: currentColor; /* 继承父元素颜色，方便统一修改 */
  -webkit-mask-image: var(--icon-path);
  mask-image: var(--icon-path);
}

/* 每个图标类仅声明路径变量 */
.icon.people {
  --icon-path: url('path/to/people.svg');
}
.icon.settings {
  --icon-path: url('path/to/settings.svg');
}

使用方式：<i class="icon people"></i>，后续新增图标只需要加一行变量定义即可。

2. HTML data属性+CSS属性选择器 #

通过自定义data-icon属性标记图标类型，CSS用属性选择器匹配，避免多类名：

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  content: '';
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: currentColor;
}

/* 按data属性匹配图标 */
.icon[data-icon="people"] {
  -webkit-mask-image: url('path/to/people.svg');
  mask-image: url('path/to/people.svg');
}
.icon[data-icon="settings"] {
  -webkit-mask-image: url('path/to/settings.svg');
  mask-image: url('path/to/settings.svg');
}

使用方式：<i class="icon" data-icon="people"></i>，HTML结构更语义化。

3. 预处理器@each循环（Sass/Less） #

如果项目使用CSS预处理器，可通过循环批量生成图标类，彻底避免手动重复：
以Sass为例：

// 维护一个图标映射表：键是类名，值是SVG路径
$icons: (
  people: 'path/to/people.svg',
  settings: 'path/to/settings.svg',
  // 新增图标直接在这里加
);

// 通用基类
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  content: '';
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: currentColor;
}

// 循环生成所有图标类
@each $name, $path in $icons {
  .icon.#{$name} {
    -webkit-mask-image: url($path);
    mask-image: url($path);
  }
}

编译后会自动生成所有图标类，只需要维护映射表即可。

4. SVG Sprite（彻底消除CSS重复） #

如果允许修改HTML结构，SVG Sprite是最优方案，完全不需要大量图标类：
首先定义一个隐藏的SVG精灵：

<svg style="display: none;">
  <symbol id="icon-people" viewBox="0 0 24 24">
    <!-- 这里放people图标的SVG代码 -->
  </symbol>
  <symbol id="icon-settings" viewBox="0 0 24 24">
    <!-- 这里放settings图标的SVG代码 -->
  </symbol>
</svg>

然后使用图标：

<svg class="icon" aria-hidden="true">
  <use href="#icon-people"></use>
</svg>

CSS只需要写通用样式：

.icon {
  width: 1em;
  height: 1em;
  fill: currentColor; /* 控制图标颜色 */
}

这种方式性能更好（减少HTTP请求），也更易维护，新增图标只需要在SVG精灵里加一个<symbol>。

内容的提问来源于stack exchange，提问作者Joséph Flames