feat: automatically replace hard coded fill and stroke colors in inli…

…ned SVGs with CSS custom prop placeholders
boltdesignsystem · Sep 3, 2019 · dad8745 · dad8745
1 parent c11aa05
commit dad8745
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/packages/components/bolt-icon/src/icon.twig b/packages/components/bolt-icon/src/icon.twig
@@ -18,6 +18,13 @@
       {% include "@bolt-components-icons/#{name}.svg" %}
     {% endset %}
 
-    {{ svgIcon | replace({'<svg ': '<svg ' ~ 'class="' ~ attributes.class ~ '"'}) }}
+    {{ svgIcon
+      | replace('/fill="((?!.*(none|#FFFFFF))[^"]+)"/', 'fill="var(--bolt-theme-icon, currentColor)"')
+      | replace('fill="#FFFFFF', 'fill="rgba(var(--bolt-theme-background), 1)"')
+      | replace('<svg ', '<svg ' ~ 'class="' ~ attributes.class ~ '"')
+      | replace('/<!--(.*)-->/Uis', '')
+      | replace('/height="([^"]+)"/', '')
+      | replace('/width="([^"]+)"/', '')
+    }}
   {% endif %}
 </bolt-icon>