fix color replace on background icons

JensDll · May 5, 2022 · a4e1f38 · a4e1f38
1 parent 1b5003e
commit a4e1f38
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 10 deletions.
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.1",
+  "version": "1.0.2",
   "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
@@ -27,7 +27,7 @@ const getIconAsMask = (
   body: string,
   mode: IconMode
 ) => {
-  const svg = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 ${width} ${height}">${body}</svg>`
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}">${body}</svg>`
   const url = `url("data:image/svg+xml;utf8,${encodeSvg(svg)}")`
 
   if (mode === 'mask') {
@@ -49,8 +49,8 @@ const getIconAsMask = (
 
 const getIconAsBackground = (width: number, height: number, body: string) => {
   return (color: string) => {
-    body = body.replace(/currentColor/g, color)
-    const svg = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 ${width} ${height}">${body}</svg>`
+    const coloredBody = body.replace(/currentColor/g, color)
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}">${coloredBody}</svg>`
     const url = `url("data:image/svg+xml,${encodeSvg(svg)}")`
 
     return {

diff --git a/playground/vue/src/App.vue b/playground/vue/src/App.vue
@@ -4,8 +4,10 @@
   <section class="mx-auto max-w-6xl px-6 py-12">
     <h1 class="text-5xl font-bold">Icons</h1>
     <section class="mt-6 flex space-x-2">
-      <div class="i-heroicons-solid-trash h-8 w-8 hover:text-cyan-500"></div>
-      <div class="bg-heroicons-solid-trash-green-500 h-8 w-8"></div>
+      <div class="i-heroicons-solid-trash h-8 w-8 hover:text-purple-500"></div>
+      <div
+        class="bg-heroicons-outline-trash-emerald-500 hover:bg-heroicons-outline-trash-emerald-300 h-8 w-8"
+      ></div>
       <div
         class="i-heroicons-outline-lock-closed hover:i-heroicons-outline-lock-open h-8 w-8"
       ></div>

diff --git a/playground/vue/src/icons.json b/playground/vue/src/icons.json
@@ -1,7 +1,7 @@
 {
   "icons": {
     "loading": {
-      "body": "<path d=\"M9.219 3.44A9 9 0 0 1 21 12\" stroke=\"currentColor\" stroke-opacity=\".75\" stroke-width=\"4\"/><path d=\"M21 12A9 9 0 1 1 9.219 3.44\" stroke=\"currentColor\" stroke-opacity=\".25\" stroke-width=\"4\"/>"
+      "body": "<path d=\"M23 12A11 11 0 0 0 8.6 1.538L9.79 5.2a7.15 7.15 0 0 1 9.36 6.8H23Z\" fill=\"currentColor\" fill-opacity=\".75\"/><path d=\"M23 12A11 11 0 1 1 8.6 1.538L9.79 5.2a7.15 7.15 0 1 0 9.36 6.8H23Z\" fill=\"currentColor\" fill-opacity=\".25\"/>"
     }
   },
   "width": 24,

diff --git a/playground/vue/tailwind.config.js b/playground/vue/tailwind.config.js
@@ -13,10 +13,10 @@ module.exports = {
   plugins: [
     Icons({
       heroiconsSolid: {
-        icons: ['trash', 'trash?bg']
+        icons: ['trash']
       },
       heroiconsOutline: {
-        icons: ['lock-open', 'lock-closed']
+        icons: ['lock-open', 'lock-closed', 'trash?bg']
       },
       openmoji: {
         icons: ['snake', 'cat', 'dolphin']
@@ -34,7 +34,7 @@ module.exports = {
         icons: ['loading'],
         // Can be a URI
         location:
-          'https://gist.githubusercontent.com/JensDll/4e59cf6005f585581975941a94bc1d88/raw/6cdeb3cb9dacd47fd132d49004a2e8f4cbc0774f/icons.json'
+          'https://gist.githubusercontent.com/JensDll/4e59cf6005f585581975941a94bc1d88/raw/0e70bdac81224add27d8f0576ab15406709e5938/icons.json'
       },
       customAlt: {
         icons: ['loading'],