Add rocket icon (#525)

* add rocket icon

* add tag

docs/index.md

@@ -15,7 +15,7 @@ With help of the community, contributors are providing the library of new icons.
 
 When designing new icons, the community is working with a set of design rules. This is to keep icons: recognizable, consistency in style, and readable on all sizes. The community likes to have creativity in new icons but conventional design is important to have recognizable icons.
 
-Beside design, code is also important. Assets like icons in for example web projects can increase the transferred bytes significantly. With the growing internet, lucide has the responsibility to keep their assets small as possible. To achieve this, lucide uses SVG compression and specific code architecture for three-shaking abilities. With three-shaking used you will only ship the icons you used, helps you to keep the software small as possible when distributed.
+Beside design, code is also important. Assets like icons in for example web projects can increase the transferred bytes significantly. With the growing internet, lucide has the responsibility to keep their assets small as possible. To achieve this, lucide uses SVG compression and specific code architecture for tree-shaking abilities. With tree-shaking used you will only ship the icons you used, helps you to keep the software small as possible when distributed.
 
 Lucide provides several official packages for: [Web (Vanilla)](https://lucide.dev/docs/lucide), [React](https://lucide.dev/docs/lucide-react), [Vue](https://lucide.dev/docs/lucide-vue), [Vue 3](https://lucide.dev/docs/lucide-vue-next), [Svelte](https://lucide.dev/docs/lucide-svelte),[Preact](https://lucide.dev/docs/lucide-preact), [Angular](https://lucide.dev/docs/lucide-angular), [NodeJS](https://lucide.dev/docs/lucide-static#nodejs) and [Flutter](https://lucide.dev/docs/lucide-flutter).
 

docs/packages/lucide-static.md

@@ -11,7 +11,7 @@ This package include the following lucide implementations:
 
 This package is suitable for very specific use cases for example if you want to use icon fonts, svg sprites, normal svgs or Common.js Svg strings in your javascript project.
 
-> ⚠️ It is not recommended to use this package for svg sprites or icon fonts for web pages/applications, for prototyping it is ok. We recommend to bundlers for web applications to make sure you only bundle the used icons from this icon library (Threeshaking). Otherwise it will load all the icons, making you webpage loading slower. Threeshaking is only available in the packages: [lucide](lucide), [lucide-react](lucide-react), [lucide-vue](lucide-vue), [lucide-vue-next](lucide-vue-next), [lucide-angular](lucide-angular), [lucide-preact](lucide-preact)
+> ⚠️ It is not recommended to use this package for svg sprites or icon fonts for web pages/applications, for prototyping it is ok. We recommend to bundlers for web applications to make sure you only bundle the used icons from this icon library (Treeshaking). Otherwise it will load all the icons, making you webpage loading slower. Threeshaking is only available in the packages: [lucide](lucide), [lucide-react](lucide-react), [lucide-vue](lucide-vue), [lucide-vue-next](lucide-vue-next), [lucide-angular](lucide-angular), [lucide-preact](lucide-preact)
 
 ## Installation
 

icons/baseline.svg

@@ -0,0 +1,15 @@
+<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="M4 20h16" />
+  <path d="M6 16l6-12 6 12" />
+  <path d="M8 12h8" />
+</svg>

icons/keyboard.svg

@@ -0,0 +1,21 @@
+<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"
+>
+  <rect x="2" y="4" width="20" height="16" rx="2" ry="2" />
+  <path d="M6 8h.001" />
+  <path d="M10 8h.001" />
+  <path d="M14 8h.001" />
+  <path d="M18 8h.001" />
+  <path d="M8 12h.001" />
+  <path d="M12 12h.001" />
+  <path d="M16 12h.001" />
+  <path d="M7 16h10" />
+</svg>

icons/rocket.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="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 00-2.91-.09z" />
+  <path d="M12 15l-3-3a22 22 0 012-3.95A12.88 12.88 0 0122 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 01-4 2z" />
+  <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" />
+  <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" />
+</svg>

icons/tag.svg

@@ -9,6 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z" />
-  <line x1="7" y1="7" x2="7.01" y2="7" />
+  <path d="M2 12V2h10l9.44 9.44a2 2 0 0 1 0 2.82l-7.18 7.18a2 2 0 0 1-2.82 0L2 12Z" />
+  <path d="M7 7h.01" />
 </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.7",
+  "version": "0.17.13",
   "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.13
 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.13",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",

packages/lucide-react/README.md

@@ -16,7 +16,7 @@ npm install lucide-react
 
 ## How to use
 
-It's build with ESmodules so it's completely threeshakable.
+It's built with ES modules so it's completely threeshakable.
 Each icon can be imported as a react component.
 
 ### Example
@@ -25,9 +25,7 @@ You can pass additional props to adjust the icon.
 
 ``` js
 import { Camera } from 'lucide-react';
-// Returns ReactComponent
 
-// Usage
 const App = () => {
   return <Camera color="red" size={48}/>
 };
@@ -48,19 +46,16 @@ export default App;
 You can also pass custom props that will be added in the svg as attributes.
 
 ``` js
-// Usage
 const App = () => {
   return <Camera fill="red"/>
 };
 ```
 
-### One generic icon component
+### Generic icon component
 
-It is possible to create one generic icon component to load icons.
+It is possible to create a generic icon component to load icons.
 
-> :warning: Example below importing all EsModules, caution  using this example, not recommended when you using bundlers, your application build size will grow strongly.
-
-#### Icon Component Example
+> :warning: The example below is importing all ES modules. This is **not** recommended when you using a bundler since your application build size will grow substantially.
 
 ``` js
 import * as icons from 'lucide-react';

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.13",
   "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.13",
   "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.13",
   "author": "Eric Fennis",
   "description": "A Lucide icon library package for Vue 3 applications",
   "license": "ISC",
@@ -38,6 +38,6 @@
     "vue-jest": "^5.0.0-alpha.10"
   },
   "peerDependencies": {
-    "vue": "3.0.1"
+    "vue": ">=3.0.1"
   }
 }

packages/lucide-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucide-vue",
-  "version": "0.17.7",
+  "version": "0.17.13",
   "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.13",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",

site/public/framework-logos/laravel.svg

@@ -0,0 +1,3 @@
+<svg width="34.6" height="36" viewBox="0 0 50 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M49.626 11.564a.809.809 0 0 1 .028.209v10.972a.8.8 0 0 1-.402.694l-9.209 5.302V39.25c0 .286-.152.55-.4.694L20.42 51.01c-.044.025-.092.041-.14.058-.018.006-.035.017-.054.022a.805.805 0 0 1-.41 0c-.022-.006-.042-.018-.063-.026-.044-.016-.09-.03-.132-.054L.402 39.944A.801.801 0 0 1 0 39.25V6.334c0-.072.01-.142.028-.21.006-.023.02-.044.028-.067.015-.042.029-.085.051-.124.015-.026.037-.047.055-.071.023-.032.044-.065.071-.093.023-.023.053-.04.079-.06.029-.024.055-.05.088-.069h.001l9.61-5.533a.802.802 0 0 1 .8 0l9.61 5.533h.002c.032.02.059.045.088.068.026.02.055.038.078.06.028.029.048.062.072.094.017.024.04.045.054.071.023.04.036.082.052.124.008.023.022.044.028.068a.809.809 0 0 1 .028.209v20.559l8.008-4.611v-10.51c0-.07.01-.141.028-.208.007-.024.02-.045.028-.068.016-.042.03-.085.052-.124.015-.026.037-.047.054-.071.024-.032.044-.065.072-.093.023-.023.052-.04.078-.06.03-.024.056-.05.088-.069h.001l9.611-5.533a.801.801 0 0 1 .8 0l9.61 5.533c.034.02.06.045.09.068.025.02.054.038.077.06.028.029.048.062.072.094.018.024.04.045.054.071.023.039.036.082.052.124.009.023.022.044.028.068zm-1.574 10.718v-9.124l-3.363 1.936-4.646 2.675v9.124l8.01-4.611zm-9.61 16.505v-9.13l-4.57 2.61-13.05 7.448v9.216l17.62-10.144zM1.602 7.719v31.068L19.22 48.93v-9.214l-9.204-5.209-.003-.002-.004-.002c-.031-.018-.057-.044-.086-.066-.025-.02-.054-.036-.076-.058l-.002-.003c-.026-.025-.044-.056-.066-.084-.02-.027-.044-.05-.06-.078l-.001-.003c-.018-.03-.029-.066-.042-.1-.013-.03-.03-.058-.038-.09v-.001c-.01-.038-.012-.078-.016-.117-.004-.03-.012-.06-.012-.09v-.002-21.481L4.965 9.654 1.602 7.72zm8.81-5.994L2.405 6.334l8.005 4.609 8.006-4.61-8.006-4.608zm4.164 28.764l4.645-2.674V7.719l-3.363 1.936-4.646 2.675v20.096l3.364-1.937zM39.243 7.164l-8.006 4.609 8.006 4.609 8.005-4.61-8.005-4.608zm-.801 10.605l-4.646-2.675-3.363-1.936v9.124l4.645 2.674 3.364 1.937v-9.124zM20.02 38.33l11.743-6.704 5.87-3.35-8-4.606-9.211 5.303-8.395 4.833 7.993 4.524z" fill="#FF2D20" fill-rule="evenodd"/>
+</svg>

site/src/components/Header.tsx

@@ -12,6 +12,7 @@ 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';
+import LaravelLogo from '../../public/framework-logos/laravel.svg';
 
 function generateZip(icons) {
   const zip = new JSZip();
@@ -71,6 +72,11 @@ const Header = ({ data }) => {
       Logo: FlutterLogo,
       href: '/docs/lucide-flutter',
     },
+    {
+      name: 'lucide-laravel',
+      Logo: LaravelLogo,
+      href: 'https://github.com/mallardduck/blade-lucide-icons',
+    }
   ];
 
   return (

tags.json

@@ -72,7 +72,7 @@
     "flex",
     "justify"
   ],
-  "align-horizonal-distribute-center": [
+  "align-horizontal-distribute-center": [
     "items",
     "flex",
     "justify",
@@ -80,13 +80,13 @@
     "evenly",
     "around"
   ],
-  "align-horizonal-distribute-end": [
+  "align-horizontal-distribute-end": [
     "right",
     "items",
     "flex",
     "justify"
   ],
-  "align-horizonal-distribute-start": [
+  "align-horizontal-distribute-start": [
     "left",
     "items",
     "flex",
@@ -311,6 +311,11 @@
     "diagram",
     "graph"
   ],
+  "baseline": [
+    "text",
+    "format",
+    "color"
+  ],
   "battery": [
     "power",
     "electricity"
@@ -400,7 +405,8 @@
   ],
   "bold": [
     "text",
-    "strong"
+    "strong",
+    "format"
   ],
   "book": [
     "read",
@@ -1300,7 +1306,8 @@
   ],
   "italic": [
     "oblique",
-    "text"
+    "text",
+    "format"
   ],
   "japanese-yen": [
     "currency",
@@ -1313,6 +1320,12 @@
     "authentication",
     "secure"
   ],
+  "keyboard": [
+    "layout",
+    "spell",
+    "settings",
+    "mouse"
+  ],
   "landmark": [
     "bank",
     "building",
@@ -1873,6 +1886,13 @@
   "rewind": [
     "music"
   ],
+  "rocket": [
+    "release",
+    "boost",
+    "launch",
+    "space",
+    "version"
+  ],
   "rocking-chair": [
     "chair",
     "furniture",
@@ -2219,7 +2239,8 @@
   "strikethrough": [
     "cross out",
     "delete",
-    "remove"
+    "remove",
+    "format"
   ],
   "subscript": [
     "text"
@@ -2417,7 +2438,8 @@
     "weather"
   ],
   "underline": [
-    "text"
+    "text",
+    "format"
   ],
   "undo": [
     "redo",
@@ -2532,6 +2554,14 @@
     "clock",
     "time"
   ],
+  "waves": [
+    "water",
+    "sea",
+    "sound",
+    "hertz",
+    "wavelength",
+    "vibrate"
+  ],
   "webcam": [
     "camera",
     "security"