fix bug in currentColor replacement for icons forced as background (#…

…13)
JensDll · Nov 15, 2022 · b4f3e76 · b4f3e76
1 parent 49e213e
commit b4f3e76
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
@@ -83,8 +83,8 @@ export function parseIconName(iconName: string) {
   return { normalizedIconName, iconMode }
 }
 
-export function iconToDataUrl(icon: LoadedIcon) {
-  const svg = `<svg viewBox="${icon.left} ${icon.top} ${icon.width} ${icon.height}">${icon.body}</svg>`
+export function iconToDataUrl(icon: LoadedIcon, body = icon.body) {
+  const svg = `<svg viewBox="${icon.left} ${icon.top} ${icon.width} ${icon.height}">${body}</svg>`
   return `url("data:image/svg+xml,${encodeSvg(svg)}")`
 }
 

diff --git a/packages/tailwindcss-plugin-icons/src/css.ts b/packages/tailwindcss-plugin-icons/src/css.ts
@@ -57,10 +57,11 @@ export function getIconCssAsColorFunction(
   cssDefaults: CSSRuleObjectWithScale
 ): ColorFunction {
   return color => {
-    icon.body = icon.body.replace(/currentColor/g, color)
-
     return {
-      [URL_VAR_NAME]: iconToDataUrl(icon),
+      [URL_VAR_NAME]: iconToDataUrl(
+        icon,
+        icon.body.replace(/currentColor/g, color)
+      ),
       background: `var(${URL_VAR_NAME}) no-repeat`,
       backgroundSize: '100% 100%',
       ...getIconDimensions(icon, cssDefaults[SCALE]),