chore: updates to support micro icons now provided by heroicons

tzellman · Jan 24, 2024 · 10cc801 · 10cc801
1 parent 5a5e623
commit 10cc801
Show file tree

Hide file tree

Showing 10 changed files with 39 additions and 18 deletions.
diff --git a/.tool-versions b/.tool-versions
@@ -1 +1 @@
-nodejs 18.17.1
+nodejs 20.11.0
diff --git a/README.md b/README.md
@@ -29,7 +29,7 @@ The basic usage:
 The `HeroIcon` component supports the following arguments:
 
 -   `@icon` - the name of the icon to render
--   `@type` - one of `outline`, `solid` or `mini`
+-   `@type` - one of `outline`, `solid`, `mini` or `micro`
 
 ### Custom configuration
 
@@ -51,7 +51,7 @@ module.exports = function (defaults) {
             omit: [/chevron/, "camera"],
             // include only certain matching icons (array of string or RegExp)
             include: [/.*/],
-            // include only certain types (outline, solid, mini)
+            // include only certain types (outline, solid, mini, micro)
             types: ["outline"],
         },
     });

diff --git a/index.js b/index.js
@@ -44,6 +44,11 @@ module.exports = {
 
         const toMatcher = (s) => (s instanceof RegExp ? s : new RegExp(`^${s}$`));
 
+        const solidSizeToType = {
+            '16': 'micro',
+            '20': 'mini',
+            '24': 'solid'
+        };
         const omit = (this._options.omit ?? []).map((o) => toMatcher(o));
         const include = (this._options.include ?? []).map((o) => toMatcher(o));
         const types = (this._options.types ?? []).map((o) => toMatcher(o));
@@ -58,7 +63,7 @@ module.exports = {
             .map((o) => ({
                 ...o,
                 name: o.name.replace(/[.]svg$/, ''),
-                type: o.type === 'solid' ? (o.size === '20' ? 'mini' : 'solid') : 'outline'
+                type: o.type === 'solid' ? solidSizeToType[o.size] : 'outline'
             }))
             .filter((o) => !omit.some((r) => r.test(o.name)))
             .filter((o) => !include.length || include.some((r) => r.test(o.name)))

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -38,7 +38,7 @@
     "ember-get-config": "2.1.1",
     "ember-modifier": "4.1.0",
     "glob": "10.3.4",
-    "heroicons": "2.0.18",
+    "heroicons": "^2.1.1",
     "htmlparser2": "9.0.0"
   },
   "devDependencies": {

diff --git a/tests/dummy/app/controllers/index.js b/tests/dummy/app/controllers/index.js
@@ -19,6 +19,17 @@ export default class IndexController extends Controller {
         return icons;
     }
 
+    get typeSizeClasses() {
+        switch (this.type) {
+            case 'mini':
+                return 'w-5 h-5';
+            case 'micro':
+                return 'w-4 h-4';
+            default:
+                return 'w-6 h-6';
+        }
+    }
+
     get types() {
         return [
             {
@@ -35,6 +46,11 @@ export default class IndexController extends Controller {
                 type: 'mini',
                 blurb: '20x20, Solid fill',
                 description: 'For smaller elements like buttons, form elements, and to support text.'
+            },
+            {
+                type: 'micro',
+                blurb: '16x16, Solid fill',
+                description: 'For even smaller elements like buttons, form elements, and to support text.'
             }
         ];
     }

diff --git a/tests/dummy/app/index.html b/tests/dummy/app/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
     <head>
         <meta charset="utf-8" />

diff --git a/tests/dummy/app/templates/index.hbs b/tests/dummy/app/templates/index.hbs
@@ -10,7 +10,7 @@
         />
     </div>
 
-    <div class="grid grid-cols-3 gap-8 pt-12" role="tablist" aria-orientation="horizontal">
+    <div class="grid grid-cols-4 gap-4 pt-12" role="tablist" aria-orientation="horizontal">
         {{#each this.types as |type|}}
             <div
                 role="tab"
@@ -40,7 +40,7 @@
                         <HeroIcon
                             @icon={{icon.name}}
                             @type={{icon.type}}
-                            class={{concat "text-purple-500 " (if (eq this.type "mini") "w-5 h-5" "w-6 h-6")}}
+                            class={{concat "text-purple-500 " this.typeSizeClasses}}
                         />
                         <p class="truncate text-sm font-medium text-slat-500">{{icon.name}}</p>
                     </dt>

diff --git a/tests/dummy/config/tailwind.js b/tests/dummy/config/tailwind.js
@@ -2,10 +2,10 @@ module.exports = {
     content: ['./tests/**/*.{hbs,js}'],
     safelist: [
         {
-            pattern: /w-[56]/
+            pattern: /w-[456]/
         },
         {
-            pattern: /h-[56]/
+            pattern: /h-[456]/
         }
     ]
 };
diff --git a/tests/index.html b/tests/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
     <head>
         <meta charset="utf-8" />