将 svg:path 内的 fill 与 SCSS 变量绑定

在开发过程中，我们常常需要在 SVG 图标的 path 元素内设置 fill 属性。为了方便管理颜色，我们可以将颜色值定义为 SCSS 变量，并将其与 fill 属性绑定。

步骤

1. 定义 SCSS 变量

   在样式文件中，定义颜色变量，例如：

   $primary-color: #007bff;
   

2. 将变量与属性绑定

   使用 fill 属性，将变量与 path 元素内的 fill 属性绑定：

   <svg width="50" height="50" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path fill="#{$primary-color}" d="M21 0H3C1.34315 0 0 1.34315 0 3V21C0 22.6569 1.34315 24 3 24H21C22.6569 24 24 22.6569 24 21V3C24 1.34315 22.6569 0 21 0ZM22 21C22 21.5523 21.5523 22 21 22H3C2.44772 22 2 21.5523 2 21V3C2 2.44772 2.44772 2 3 2H21C21.5523 2 22 2.44772 22 3V21Z"/>
   </svg>
   

   使用变量时，需要使用 Sass 的插值语法 #{$variable-name} 将变量名嵌入到字符串内。这样，当编译样式文件时，Sass 编译器会自动将变量替换为变量的值。

示例

<svg width="50" height="50" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
   <path fill="#{$primary-color}" d="M21 0H3C1.34315 0 0 1.34315 0 3V21C0 22.6569 1.34315 24 3 24H21C22.6569 24 24 22.6569 24 21V3C24 1.34315 22.6569 0 21 0ZM22 21C22 21.5523 21.5523 22 21 22H3C2.44772 22 2 21.5523 2 21V3C2 2.44772 2.44772 2 3 2H21C21.5523 2 22 2.44772 22 3V21Z"/>
</svg>

$primary-color: #007bff;

path {
   fill: $primary-color;
}

结论

将 svg:path 内的 fill 与 SCSS 变量绑定，可以方便地管理颜色，并且可以在需要修改颜色的时候，只需要修改 SCSS 变量，而不需要修改每个 path 元素内的 fill 属性。