Add waves icon (#491)

* Add info page links

* Add size option to parameter api

* update lock file

icons/locate-off.svg

@@ -0,0 +1,19 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <line x1="2" x2="5" y1="12" y2="12" />
+  <line x1="19" x2="22" y1="12" y2="12" />
+  <line x1="12" x2="12" y1="2" y2="5" />
+  <line x1="12" x2="12" y1="19" y2="22" />
+  <path d="M7.11 7.11C5.83 8.39 5 10.1 5 12c0 3.87 3.13 7 7 7 1.9 0 3.61-.83 4.89-2.11" />
+  <path d="M18.71 13.96c.19-.63.29-1.29.29-1.96 0-3.87-3.13-7-7-7-.67 0-1.33.1-1.96.29" />
+  <line x1="2" x2="22" y1="2" y2="22" />
+</svg>

icons/palmtree.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M13 8c0-2.76-2.46-5-5.5-5S2 5.24 2 8h2l1-1 1 1h4" />
+  <path d="M13 7.14A5.82 5.82 0 0116.5 6c3.04 0 5.5 2.24 5.5 5h-3l-1-1-1 1h-3" />
+  <path d="M5.89 9.71c-2.15 2.15-2.3 5.47-.35 7.43l4.24-4.25.7-.7.71-.71 2.12-2.12c-1.95-1.96-5.27-1.8-7.42.35z" />
+  <path d="M11 15.5c.5 2.5-.17 4.5-1 6.5h4c2-5.5-.5-12-1-14" />
+</svg>

icons/waves.svg

@@ -0,0 +1,18 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M2 6c.6.5 1.2 1 2.5 1C7 7 7 5 9.5 5c1.3 0 1.9.5 2.5 1" />
+  <path d="M2 18c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1" />
+  <path d="M2 12c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1" />
+  <path d="M12 6c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1" />
+  <path d="M12 18c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1" />
+  <path d="M12 12c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1" />
+</svg>

packages/lucide-angular/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide-angular",
   "description": "A Lucide icon library package for Angular applications",
-  "version": "0.17.5",
+  "version": "0.17.8",
   "author": "SMAH1",
   "license": "ISC",
   "homepage": "https://lucide.dev",

packages/lucide-figma/manifest.json

@@ -9,9 +9,18 @@
     "worker": "dist/src/worker/worker.html"
   },
   "parameterOnly": false,
-  "parameters": [{
-    "name": "Icon",
-    "key": "icon-name",
-    "description": "Enter the name of the icon you want to insert."
-  }]
+  "parameters": [
+    {
+      "name": "Icon",
+      "key": "icon-name",
+      "description": "Enter the name of the icon you want to insert."
+    },
+    {
+      "name": "Size",
+      "key": "size",
+      "description": "Enter the size of the icon.",
+      "allowFreeform": true,
+      "optional": true
+    }
+  ]
 }

packages/lucide-figma/src/components/EditBar/EditBar.tsx

@@ -0,0 +1,5 @@
+const EditBar = () => {
+
+}
+
+export default EditBar

packages/lucide-figma/src/components/Menu/Menu.scss

@@ -0,0 +1,30 @@
+.menu {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  height: 40px;
+  line-height: 40px;
+  border-bottom: 1px solid var(--color-border, #e5e5e5);
+  justify-content: flex-start;
+}
+
+.menu-item {
+  font-weight: 500;
+  font-size: 11px;
+  color: var(--color-text-tertiary, #b3b3b3);
+  padding: 0 8px;
+  text-transform: capitalize;
+  cursor: pointer;
+
+  &.active {
+    color: var(--color-text, #333333);
+  }
+
+  &:first-child {
+    padding-left: 16px;
+  }
+
+  &:last-child {
+    padding-right: 16px;
+  }
+}

packages/lucide-figma/src/components/Menu/Menu.tsx

@@ -0,0 +1,23 @@
+import { useState } from 'react'
+import './Menu.scss'
+
+interface MenuProps {
+  page: string
+  setPage: (page:string) => void
+}
+
+const menuItems = ['icons', 'info']
+
+const Menu = ({page, setPage = (page) => {}}: MenuProps) => {
+  return (
+    <nav className="menu">
+      {  menuItems.map((menuItem) => (
+         <div className={`menu-item ${page === menuItem ? 'active' : null }`} onClick={() => setPage(menuItem)}>
+          {menuItem}
+        </div>
+      )) }
+    </nav>
+  )
+}
+
+export default Menu

packages/lucide-figma/src/components/Menu/index.ts

@@ -0,0 +1 @@
+export { default } from './Menu'

packages/lucide-figma/src/components/SearchInput/SearchInput.scss

@@ -1,9 +1,11 @@
 .search-input {
+  position: relative;
+  display: flex;
+  align-items: center;
+
   .icon {
     position: absolute;
-    top: 0;
-    left: 0;
-    padding: 4px;
+    left: 16px;
   }
   input {
     width: 100%;

packages/lucide-figma/src/components/icons/SearchIcon.tsx

@@ -1,24 +1,22 @@
 import { createElement, forwardRef } from 'react'
 
-const SearchIcon = forwardRef((props: any, ref) => createElement(
-    'svg',
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: 32,
-      height: 32,
-      clipRule: 'evenodd',
-      fillRule: 'evenodd',
-      ref,
-      ...props,
-    },
-    [
-      createElement(
-        'path', {
-          d: 'm20 15c0 2.7614-2.2386 5-5 5s-5-2.2386-5-5 2.2386-5 5-5 5 2.2386 5 5zm-1.1256 4.5815c-1.0453.8849-2.3975 1.4185-3.8744 1.4185-3.3137 0-6-2.6863-6-6s2.6863-6 6-6 6 2.6863 6 6c0 1.4769-.5336 2.8291-1.4185 3.8744l4.2721 4.272-.7072.7072z',
-          key: 'path'
-        }
-      )
-    ]
-  ))
+
+const SearchIcon = (props: any) => (
+  <svg
+    width="11"
+    height="11"
+    viewBox="0 0 11 11"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    {...props}
+  >
+    <path
+      d="M6.453 7.16C5.776 7.687 4.924 8 4 8 1.79 8 0 6.21 0 4c0-2.21 1.79-4 4-4 2.21 0 4 1.79 4 4 0 .924-.314 1.776-.84 2.453l3.194 3.193-.708.707L6.453 7.16zM7 4c0 1.657-1.343 3-3 3-1.657 0-3-1.343-3-3 0-1.657 1.343-3 3-3 1.657 0 3 1.343 3 3z"
+      fillRule="evenodd"
+      fillOpacity="1"
+      stroke="none"
+    />
+  </svg>
+)
 
 export default SearchIcon

packages/lucide-figma/src/interface/interface.scss

@@ -9,6 +9,17 @@
       format('woff');
 }
 
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('https://rsms.me/inter/font-files/Inter-Medium.woff2?v=3.9')
+      format('woff2'),
+    url('https://rsms.me/inter/font-files/Inter-Medium.woff?v=3.9')
+      format('woff');
+}
+
 :root {
   --color-blue: #18a0fb;
   --color-black: #333;
@@ -47,3 +58,48 @@ footer {
     color: inherit;
   }
 }
+
+.floating {
+  position: absolute;
+  bottom: -10px;
+  left: 0;
+  padding: 10px;
+  background: blue;
+}
+
+.info-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+
+.lucide-logo {
+  width: 160px;
+}
+
+.version {
+  margin-top: 8px;
+  padding: 8px;
+  font-weight: bold;
+  font-size: 18px;
+  color: rgba(0, 0, 0, 0.5);
+}
+
+.link-list {
+  width: 160px;
+  margin: 0 auto;
+  padding-top: 24px;
+}
+
+.info-link {
+  color: var(--color-blue);
+  display: block;
+  padding: 2px 0;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}

packages/lucide-figma/src/interface/interface.tsx

@@ -1,15 +1,17 @@
 import { useEffect, useMemo, useState } from 'react'
-import { createReactComponent } from 'lucide-react'
 import ReactDOM from 'react-dom'
+import * as views from '../views'
+
+type Views = typeof views
 
-import IconButton from '../components/IconButton'
-import SearchInput from '../components/SearchInput'
 import useSearch, { Icon } from '../hooks/useSearch'
 
 import { getIcons } from '../api/fetchIcons'
 import './interface.scss'
+import Menu from '../components/Menu'
 
 function App() {
+  const [page, setPage] = useState('icons')
   const [query, setQuery] = useState('')
   const [icons, setIcons] = useState<Icon[]>([])
   const [tags, setTags] = useState({})
@@ -33,33 +35,20 @@ function App() {
     return null
   }
 
+  const View = views?.[page as keyof Views] ?? views.icons
+
   return (
     <div>
-      <SearchInput
-        value={query}
-        iconCount={icons.length}
-        onChange={(event)  => setQuery(event.target.value)}
+      <Menu page={page} setPage={setPage}/>
+      <View
+        {...{
+          query,
+          setQuery,
+          searchResults,
+          icons,
+          version
+        }}
       />
-      <main>
-        <div className='icon-grid'>
-          {searchResults.map(([name, iconNode] :any) => (
-            <IconButton
-              name={name}
-              key={name}
-              component={createReactComponent(name, iconNode)}
-            />
-          ))}
-        </div>
-        <footer>
-          <a
-            href="https://lucide.dev"
-            target="_blank"
-            className='footer-link'
-          >
-            Lucide v{version}
-          </a>
-        </footer>
-      </main>
     </div>
   )
 }

packages/lucide-figma/src/main.ts

@@ -5,6 +5,12 @@ figma.showUI(__uiFiles__.worker, { visible: false })
 
 let cachedIcons: LucideIcons
 
+type InsertableNodes = FrameNode | GroupNode
+
+function isInsertableNode (node: SceneNode): node is InsertableNodes {
+  return ['FRAME', 'GROUP'].includes(node.type)
+}
+
 const setResults = ({result, query, lucideIcons} : { result: SuggestionResults, query: string, lucideIcons: LucideIcons }) => {
   const icons = Object.entries(lucideIcons.iconNodes);
 
@@ -16,33 +22,65 @@ const setResults = ({result, query, lucideIcons} : { result: SuggestionResults,
   result.setSuggestions(suggestions)
 }
 
+// const styles = figma.getLocalPaintStyles();
+// const styleNames = styles.map((style) => style.name);
+// console.log(styleNames);
+
 figma.parameters.on('input', async ({ parameters, key, query, result }) => {
   if (key === 'icon-name') {
-    console.log('typ tpy', query);
     cachedIcons = await figma.clientStorage.getAsync(`lucide-icons`)
-    console.log('cachedIcons', cachedIcons);
 
     if(cachedIcons && cachedIcons.iconNodes && cachedIcons.tags) {
       setResults({result, query, lucideIcons: cachedIcons})
     }
   }
+  if(key === 'size') {
+    const iconSizes = [24,36,48,72]
+    result.setSuggestions(iconSizes.map((size)=>({
+      name: size.toString(),
+      data: size
+    })))
+  }
 })
 
-const drawIcon = ({icon: {name, svg}}: any) => {
+const drawIcon = ({icon: {name, svg, size }}: any) => {
   const min = 0
   const max = 100
   const randomPosition = () => Math.floor(Math.random() * (max - min + 1) + min)
+
   const icon = figma.createNodeFromSvg(svg)
+  icon.setPluginData('isLucideIcon', 'true')
+  icon.setPluginData('iconName', name)
+
+  const pluginData = icon.getPluginData('isLucideIcon')
 
   icon.name = name
   icon.x = Math.round(figma.viewport.center.x + randomPosition())
   icon.y = Math.round(figma.viewport.center.y + randomPosition())
+
+  if(figma.currentPage.selection.length) {
+    let currentSelection = figma.currentPage.selection[0]
+    const isLucideIcon = currentSelection.getPluginData('isLucideIcon')
+
+    // if(isLucideIcon && currentSelection?.parent) {
+    //   return
+    //   // currentSelection = currentSelection.parent as SceneNode
+    // }
+
+    if(!isLucideIcon && isInsertableNode(currentSelection)) {
+      icon.x = currentSelection.type === 'GROUP' ? currentSelection.x : 0
+      icon.y = currentSelection.type === 'GROUP' ? currentSelection.y : 0
+
+      currentSelection.appendChild(icon)
+    }
+  }
+
   figma.currentPage.selection = [icon]
 
   // lock children
-  icon.children.forEach((vectorNode, key) => {
-    icon.children[key].locked = true
-  });
+  // icon.children.forEach((vectorNode, key) => {
+  //   icon.children[key].locked = true
+  // });
 }
 
 const setCachedIcons = async (pluginMessage: any) => {
@@ -66,7 +104,6 @@ const getCachedIcons = async () => {
 getCachedIcons()
 
 figma.ui.onmessage = (event) => {
-  console.log(event, 'main');
   switch (event.type) {
     case "drawIcon":
       drawIcon(event)
@@ -90,7 +127,12 @@ figma.ui.onmessage = (event) => {
 
 figma.on('run', event => {
   if(event.parameters) {
-    figma.ui.postMessage({ type: 'getSvg', iconName: event.parameters['icon-name'], cachedIcons })
+    figma.ui.postMessage({
+      type: 'getSvg',
+      iconName: event.parameters['icon-name'],
+      size: event.parameters['size'],
+      cachedIcons
+    })
   } else {
     figma.showUI(__uiFiles__.interface, { width: 300, height: 400 })
   }

packages/lucide-figma/src/views/Icons.tsx

@@ -0,0 +1,53 @@
+import { createReactComponent } from 'lucide-react'
+
+import IconButton from '../components/IconButton'
+import SearchInput from '../components/SearchInput'
+import { Icon } from '../hooks/useSearch'
+
+interface PageProps {
+  query: string
+  setQuery: (query:string) => void
+  searchResults: Icon[]
+  icons: Icon[]
+  version: string
+}
+
+const Icons = ({
+  query,
+  setQuery,
+  searchResults,
+  icons,
+  version
+}: PageProps) => {
+  return (
+    <>
+      <SearchInput
+        value={query}
+        iconCount={icons.length}
+        onChange={(event)  => setQuery(event.target.value)}
+      />
+        <main>
+          <div className='icon-grid'>
+            {searchResults.map(([name, iconNode] :any) => (
+              <IconButton
+                name={name}
+                key={name}
+                component={createReactComponent(name, iconNode)}
+              />
+            ))}
+          </div>
+          <footer>
+            <a
+              href="https://lucide.dev"
+              target="_blank"
+              className='footer-link'
+            >
+              Lucide v{version}
+            </a>
+          </footer>
+        </main>
+    </>
+  )
+}
+
+export default Icons

packages/lucide-figma/src/views/Info.tsx

@@ -0,0 +1,64 @@
+import { SyntheticEvent } from "react"
+
+interface PageProps {
+  version: string
+}
+
+const Info = ({ version }: PageProps) => {
+  const menuItems = [
+    {
+      name: 'Report a bug',
+      url: 'https://github.com/lucide-icons/lucide/issues'
+    },
+    {
+      name: 'Contribute an icon',
+      url: 'https://github.com/lucide-icons/lucide/blob/master/CONTRIBUTING.md'
+    },
+    {
+      name: 'Website',
+      url: 'https://lucide.dev'
+    },
+    {
+      name: 'Repository',
+      url: 'https://github.com/lucide-icons/lucide'
+    },
+    {
+      name: 'License',
+      url: 'https://lucide.dev/license'
+    },
+    {
+      name: 'Community Page',
+      url: 'https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons'
+    },
+    {
+      name: 'Supported Frameworks',
+      url: 'https://lucide.dev/packages'
+    }
+  ]
+
+  const onClick = (url: string) => (event: SyntheticEvent) => {
+    event.preventDefault()
+
+    window.open(url,'_blank')
+  }
+
+  return (
+    <div className="info-page">
+      <img src="https://lucide.dev/logo-text.svg" alt="Lucide Logo" className="lucide-logo"/>
+      <p className='version'>
+        v{version}
+      </p>
+      <section className="link-list">
+        {
+          menuItems.map(({ name, url }) => (
+            <a href={url} key={name} aria-label={name} className="info-link" onClick={onClick(url)}>
+              {name}
+            </a>
+          ))
+        }
+      </section>
+    </div>
+  )
+}
+
+export default Info

packages/lucide-figma/src/views/index.ts

@@ -0,0 +1,2 @@
+export { default as icons } from './Icons'
+export { default as info } from './Info'

packages/lucide-figma/src/worker/worker.ts

@@ -14,20 +14,26 @@ const getLatestIcons = async ({ cachedIcons }: any) => {
   }, "*")
 }
 
-const getSvg = async ({ cachedIcons, iconName }: { cachedIcons: LucideIcons, iconName: string }) => {
+const getSvg = async ({ cachedIcons, iconName, size = 24 }: { cachedIcons: LucideIcons, iconName: string, size: number }) => {
   if (!cachedIcons) {
     return;
   }
 
+  console.log( iconName, size)
+
   const iconNode = cachedIcons.iconNodes[iconName];
 
   if (iconNode) {
     const IconComponent = createReactComponent(iconName, iconNode)
-    const svg = renderToString(createElement(IconComponent));
+    const svg = renderToString(createElement(IconComponent, { size }));
 
     parent.postMessage({ pluginMessage: {
       type: 'drawIcon',
-      icon: { name, svg }
+      icon: {
+        name: iconName,
+        svg,
+        size
+      }
     }}, '*')
 
     parent.postMessage({ pluginMessage: {
@@ -56,5 +62,3 @@ window.onmessage = async (event) => {
       break;
   }
 }
-
-console.log('Hello world!')

packages/lucide-flutter/pubspec.yaml

@@ -1,6 +1,6 @@
 name: lucide_icons
 description: A Lucide icon library package for Flutter applications. Fork of Feather Icons, open for anyone to contribute icons.
-version: 0.17.5
+version: 0.17.8
 homepage: https://lucide.dev
 repository: https://github.com/lucide-icons/lucide
 

packages/lucide-preact/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide-preact",
   "description": "A Lucide icon library package for Preact applications",
-  "version": "0.17.5",
+  "version": "0.17.8",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",

packages/lucide-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide-react",
   "description": "A Lucide icon library package for React applications",
-  "version": "0.17.5",
+  "version": "0.17.8",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",

packages/lucide-svelte/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide-svelte",
   "description": "A Lucide icon library package for Svelte applications",
-  "version": "0.17.5",
+  "version": "0.17.8",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",

packages/lucide-vue-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucide-vue-next",
-  "version": "0.17.5",
+  "version": "0.17.8",
   "author": "Eric Fennis",
   "description": "A Lucide icon library package for Vue 3 applications",
   "license": "ISC",

packages/lucide-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucide-vue",
-  "version": "0.17.5",
+  "version": "0.17.8",
   "author": "Eric Fennis",
   "description": "A Lucide icon library package for Vue 2 applications",
   "license": "ISC",

packages/lucide/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide",
   "description": "A Lucide icon library package for web and javascript applications.",
-  "version": "0.17.5",
+  "version": "0.17.8",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",

site/babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  presets: ['next/babel'],
-};

site/next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

site/next.config.js

@@ -1,19 +1,13 @@
 /* eslint-disable no-undef */
 module.exports = {
-  webpack: (config, options) => {
+  webpack(config) {
     config.module.rules.push({
       test: /\.svg$/,
-      use: [
-        {
-          loader: 'babel-loader',
-        },
-        {
-          loader: 'react-svg-loader',
-          options: {
-            jsx: true,
-          },
-        },
-      ],
+      issuer: {
+        and: [/\.(js|ts)x?$/],
+      },
+
+      use: ['@svgr/webpack'],
     });
 
     return config;

site/package.json

@@ -19,6 +19,7 @@
     "@mdx-js/loader": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
     "@next/mdx": "^11.0.0",
+    "@svgr/webpack": "^6.2.1",
     "downloadjs": "^1.4.7",
     "framer-motion": "^4",
     "fuse.js": "^6.5.3",
@@ -27,12 +28,12 @@
     "jszip": "^3.7.0",
     "lodash": "^4.17.20",
     "lucide-react": "0.14.0",
-    "next": "^11.1.3",
+    "next": "12",
     "next-mdx-remote": "^3.0.2",
     "prism-react-renderer": "^1.2.1",
-    "react": "^17.0.1",
+    "react": "^17.0.2",
     "react-color": "^2.19.3",
-    "react-dom": "^17.0.1",
+    "react-dom": "^17.0.2",
     "react-svg-loader": "^3.0.3"
   },
   "devDependencies": {

site/src/components/Header.tsx

@@ -11,6 +11,7 @@ import Vue3Logo from '../../public/framework-logos/vue-next.svg';
 import PreactLogo from '../../public/framework-logos/preact.svg';
 import AngularLogo from '../../public/framework-logos/angular.svg';
 import FlutterLogo from '../../public/framework-logos/flutter.svg';
+import SvelteLogo from '../../public/framework-logos/svelte.svg';
 
 function generateZip(icons) {
   const zip = new JSZip();
@@ -50,6 +51,11 @@ const Header = ({ data }) => {
       Logo: Vue3Logo,
       href: '/docs/lucide-vue-next',
     },
+    {
+      name: 'lucide-svelte',
+      Logo: SvelteLogo,
+      href: '/docs/lucide-svelte',
+    },
     {
       name: 'lucide-preact',
       Logo: PreactLogo,

site/src/components/IconList.tsx

@@ -14,7 +14,7 @@ const IconList = memo(({ icons }: IconListProps) => {
 
   return (
     <Grid templateColumns={`repeat(auto-fill, minmax(150px, 1fr))`} gap={5} marginBottom="320px">
-      {icons.map((icon) => {
+      {icons.map(icon => {
         return (
           <Link
             key={icon.name}

site/src/components/IconListItem.tsx

@@ -1,4 +1,4 @@
-import { Button, ButtonProps, Flex, Text, useToast } from '@chakra-ui/react';
+import { Box, Button, ButtonProps, Flex, Text, useToast } from '@chakra-ui/react';
 import download from 'downloadjs';
 import copy from 'copy-to-clipboard';
 import { memo, useContext } from 'react';
@@ -22,8 +22,10 @@ const IconListItem = ({ name, content, src, onClick }: IconListItemProps) => {
       variant="ghost"
       borderWidth="1px"
       rounded="lg"
-      padding={16}
+      padding={2}
+      height={32}
       position="relative"
+      whiteSpace="normal"
       onClick={event => {
         if (event.shiftKey) {
           copy(src);
@@ -44,15 +46,21 @@ const IconListItem = ({ name, content, src, onClick }: IconListItemProps) => {
       key={name}
       alignItems="center"
     >
-      <Flex direction="column" align="center" justify="center">
-        <IconWrapper
-          content={content}
-          stroke={color}
-          strokeWidth={strokeWidth}
-          height={size}
-          width={size}
-        />
-        <Text marginTop={5}>{name}</Text>
+      <Flex direction="column" align="center" justify="stretch" width="100%" gap={4}>
+        <Flex flex={2} flexBasis="100%" minHeight={10} align="flex-end">
+          <IconWrapper
+            content={content}
+            stroke={color}
+            strokeWidth={strokeWidth}
+            height={size}
+            width={size}
+          />
+        </Flex>
+        <Flex flex={1} minHeight={10} align="center">
+          <Text wordBreak="break-word" maxWidth="100%">
+            {name}
+          </Text>
+        </Flex>
       </Flex>
     </Button>
   );

site/tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "ESNext",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -12,8 +16,17 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "incremental": true
   },
-  "exclude": ["node_modules", "use-popper.d.ts", "*.md"],
-  "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx"]
+  "exclude": [
+    "node_modules",
+    "use-popper.d.ts",
+    "*.md"
+  ],
+  "include": [
+    "next-env.d.ts",
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ]
 }

tags.json

@@ -1446,6 +1446,12 @@
     "location",
     "cross"
   ],
+  "locate-off": [
+    "map",
+    "gps",
+    "location",
+    "cross"
+  ],
   "lock": [
     "security",
     "password",
@@ -1678,6 +1684,11 @@
     "color",
     "theme"
   ],
+  "palmtree": [
+    "vacation",
+    "leisure",
+    "island"
+  ],
   "paperclip": [
     "attachment",
     "file"
@@ -2521,6 +2532,14 @@
     "clock",
     "time"
   ],
+  "waves": [
+    "water",
+    "sea",
+    "sound",
+    "hertz",
+    "wavelength",
+    "vibrate"
+  ],
   "webcam": [
     "camera",
     "security"