use css custom properties to not duplicate icon content (#2)

JensDll · May 7, 2022 · 96c6058 · 96c6058
1 parent b00ad14
commit 96c6058
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -40,7 +40,7 @@ module.exports = {
         icons: ['loading'],
         // It can be a URI. Fetched resources will be cached to the file system
         location:
-          'https://gist.githubusercontent.com/JensDll/4e59cf6005f585581975941a94bc1d88/raw/6cdeb3cb9dacd47fd132d49004a2e8f4cbc0774f/icons.json'
+          'https://gist.githubusercontent.com/JensDll/4e59cf6005f585581975941a94bc1d88/raw/0e70bdac81224add27d8f0576ab15406709e5938/icons.json'
       },
       customAlt: {
         icons: ['loading'],

diff --git a/packages/tailwindcss-plugin-icons/package.json b/packages/tailwindcss-plugin-icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss-plugin-icons",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Tailwind CSS icons with classes",
   "license": "MIT",
   "author": {

diff --git a/packages/tailwindcss-plugin-icons/src/index.ts b/packages/tailwindcss-plugin-icons/src/index.ts
@@ -33,15 +33,19 @@ const getIconAsMask = (
 
   if (mode === 'mask') {
     return {
-      mask: `${url} no-repeat`,
+      '--tw-plugin-icons-url': url,
+      mask: 'var(--tw-plugin-icons-url) no-repeat',
+      '-webkit-mask': 'var(--tw-plugin-icons-url) no-repeat',
       maskSize: '100% 100%',
+      '-webkit-mask-size': '100% 100%',
       backgroundColor: 'currentColor'
     }
   }
 
   if (mode === 'color') {
     return {
-      background: `${url} no-repeat`,
+      '--tw-plugin-icons-url': url,
+      background: 'var(--tw-plugin-icons-url) no-repeat',
       backgroundSize: '100% 100%',
       backgroundColor: 'transparent'
     }
@@ -55,7 +59,8 @@ const getIconAsBackground =
     const url = `url("data:image/svg+xml,${encodeSvg(svg)}")`
 
     return {
-      background: `${url} no-repeat`,
+      '--tw-plugin-icons-url': url,
+      background: 'var(--tw-plugin-icons-url) no-repeat',
       backgroundSize: '100% 100%',
       backgroundColor: 'transparent'
     }