Group icons by icon name in search page

react-icons · Nov 28, 2022 · c1ad7cf · c1ad7cf
1 parent 1402772
commit c1ad7cf
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
diff --git a/packages/preview/src/components/pages/search/search-iconset.tsx b/packages/preview/src/components/pages/search/search-iconset.tsx
@@ -16,6 +16,7 @@ export default function SearchIconSet({ icon, query, highlightPattern }) {
         );
         return (
           <>
+            {found.length > 0 && <h3 className="icon-name">{icon.name}</h3>}
             {found.map((name) => (
               <Icon
                 key={name}

diff --git a/packages/preview/src/styles/_components.scss b/packages/preview/src/styles/_components.scss
@@ -157,6 +157,12 @@ a {
   grid-row-gap: var(--space-2);
   text-align: center;
 
+  .icon-name {
+    margin-bottom: 0;
+    grid-column: 1 / -1;
+    text-align: left;
+  }
+
   .item {
     outline: none;