Add waves icon (#491)

* Add info page links

* Add size option to parameter api

* update lock file

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.7",
+  "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.7
+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.7",
+  "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.7",
+  "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.7",
+  "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.7",
+  "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.7",
+  "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.7",
+  "version": "0.17.8",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",

tags.json

@@ -2532,6 +2532,14 @@
     "clock",
     "time"
   ],
+  "waves": [
+    "water",
+    "sea",
+    "sound",
+    "hertz",
+    "wavelength",
+    "vibrate"
+  ],
   "webcam": [
     "camera",
     "security"