diff --git a/icons/bar-chart-3.svg b/icons/bar-chart-3.svg new file mode 100644 index 000000000..efba4b93f --- /dev/null +++ b/icons/bar-chart-3.svg @@ -0,0 +1,16 @@ + + + + + + diff --git a/icons/bar-chart-4.svg b/icons/bar-chart-4.svg new file mode 100644 index 000000000..e3e85f53e --- /dev/null +++ b/icons/bar-chart-4.svg @@ -0,0 +1,16 @@ + + + + + + diff --git a/icons/bar-chart-horizontal.svg b/icons/bar-chart-horizontal.svg new file mode 100644 index 000000000..92f5dc979 --- /dev/null +++ b/icons/bar-chart-horizontal.svg @@ -0,0 +1,16 @@ + + + + + + diff --git a/icons/cpu.svg b/icons/cpu.svg index 4c45b9dd3..8aa6bb9cf 100644 --- a/icons/cpu.svg +++ b/icons/cpu.svg @@ -11,12 +11,12 @@ > - - - - - - - - + + + + + + + + diff --git a/icons/delete.svg b/icons/delete.svg index 46c79d050..895f9d6b0 100644 --- a/icons/delete.svg +++ b/icons/delete.svg @@ -9,7 +9,7 @@ stroke-linecap="round" stroke-linejoin="round" > - + diff --git a/icons/factory.svg b/icons/factory.svg new file mode 100644 index 000000000..18afd3bb0 --- /dev/null +++ b/icons/factory.svg @@ -0,0 +1,16 @@ + + + + + + diff --git a/icons/focus.svg b/icons/focus.svg new file mode 100644 index 000000000..cd6e677b6 --- /dev/null +++ b/icons/focus.svg @@ -0,0 +1,17 @@ + + + + + + + diff --git a/icons/line-chart.svg b/icons/line-chart.svg new file mode 100644 index 000000000..4857266a3 --- /dev/null +++ b/icons/line-chart.svg @@ -0,0 +1,14 @@ + + + + diff --git a/icons/map-pin-off.svg b/icons/map-pin-off.svg new file mode 100644 index 000000000..0411a3c96 --- /dev/null +++ b/icons/map-pin-off.svg @@ -0,0 +1,17 @@ + + + + + + + diff --git a/icons/navigation-2-off.svg b/icons/navigation-2-off.svg new file mode 100644 index 000000000..fa69f3ddf --- /dev/null +++ b/icons/navigation-2-off.svg @@ -0,0 +1,15 @@ + + + + + diff --git a/icons/navigation-off.svg b/icons/navigation-off.svg new file mode 100644 index 000000000..3f05f6089 --- /dev/null +++ b/icons/navigation-off.svg @@ -0,0 +1,15 @@ + + + + + diff --git a/icons/pipette.svg b/icons/pipette.svg index 85eb24147..e41814ab9 100644 --- a/icons/pipette.svg +++ b/icons/pipette.svg @@ -9,7 +9,7 @@ stroke-linecap="round" stroke-linejoin="round" > - - - + + + diff --git a/icons/puzzle.svg b/icons/puzzle.svg new file mode 100644 index 000000000..6439615f0 --- /dev/null +++ b/icons/puzzle.svg @@ -0,0 +1,13 @@ + + + diff --git a/icons/redo-2.svg b/icons/redo-2.svg new file mode 100644 index 000000000..157ff1271 --- /dev/null +++ b/icons/redo-2.svg @@ -0,0 +1,14 @@ + + + + diff --git a/icons/shopping-cart.svg b/icons/shopping-cart.svg index a73631c7f..6d9f8844e 100644 --- a/icons/shopping-cart.svg +++ b/icons/shopping-cart.svg @@ -9,7 +9,7 @@ stroke-linecap="round" stroke-linejoin="round" > - + - + diff --git a/icons/undo-2.svg b/icons/undo-2.svg new file mode 100644 index 000000000..5ed8daf56 --- /dev/null +++ b/icons/undo-2.svg @@ -0,0 +1,14 @@ + + + + diff --git a/icons/vibrate-off.svg b/icons/vibrate-off.svg new file mode 100644 index 000000000..f7484d4ad --- /dev/null +++ b/icons/vibrate-off.svg @@ -0,0 +1,17 @@ + + + + + + + diff --git a/packages/lucide-angular/package.json b/packages/lucide-angular/package.json index 473139879..d53045424 100644 --- a/packages/lucide-angular/package.json +++ b/packages/lucide-angular/package.json @@ -1,7 +1,7 @@ { "name": "lucide-angular", "description": "A Lucide icon library package for Angular applications", - "version": "0.37.0", + "version": "0.45.0", "author": "SMAH1", "license": "ISC", "homepage": "https://lucide.dev", diff --git a/packages/lucide-flutter/pubspec.yaml b/packages/lucide-flutter/pubspec.yaml index db68f55f5..665eb1d75 100644 --- a/packages/lucide-flutter/pubspec.yaml +++ b/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.37.0 +version: 0.45.0 homepage: https://lucide.dev repository: https://github.com/lucide-icons/lucide diff --git a/packages/lucide-preact/package.json b/packages/lucide-preact/package.json index a3351c80d..4df77a820 100644 --- a/packages/lucide-preact/package.json +++ b/packages/lucide-preact/package.json @@ -1,7 +1,7 @@ { "name": "lucide-preact", "description": "A Lucide icon library package for Preact applications", - "version": "0.37.0", + "version": "0.45.0", "license": "ISC", "homepage": "https://lucide.dev", "bugs": "https://github.com/lucide-icons/lucide/issues", diff --git a/packages/lucide-react/package.json b/packages/lucide-react/package.json index 5ab9f530f..31555cc8c 100644 --- a/packages/lucide-react/package.json +++ b/packages/lucide-react/package.json @@ -1,7 +1,7 @@ { "name": "lucide-react", "description": "A Lucide icon library package for React applications", - "version": "0.37.0", + "version": "0.45.0", "license": "ISC", "homepage": "https://lucide.dev", "bugs": "https://github.com/lucide-icons/lucide/issues", diff --git a/packages/lucide-svelte/package.json b/packages/lucide-svelte/package.json index 318dc4587..d342a67fa 100644 --- a/packages/lucide-svelte/package.json +++ b/packages/lucide-svelte/package.json @@ -1,7 +1,7 @@ { "name": "lucide-svelte", "description": "A Lucide icon library package for Svelte applications", - "version": "0.37.0", + "version": "0.45.0", "license": "ISC", "homepage": "https://lucide.dev", "bugs": "https://github.com/lucide-icons/lucide/issues", diff --git a/packages/lucide-vue-next/package.json b/packages/lucide-vue-next/package.json index f3cecdb32..09ff0e605 100644 --- a/packages/lucide-vue-next/package.json +++ b/packages/lucide-vue-next/package.json @@ -1,6 +1,6 @@ { "name": "lucide-vue-next", - "version": "0.37.0", + "version": "0.45.0", "author": "Eric Fennis", "description": "A Lucide icon library package for Vue 3 applications", "license": "ISC", diff --git a/packages/lucide-vue/package.json b/packages/lucide-vue/package.json index 5aa7c3d96..837550ce1 100644 --- a/packages/lucide-vue/package.json +++ b/packages/lucide-vue/package.json @@ -1,6 +1,6 @@ { "name": "lucide-vue", - "version": "0.37.0", + "version": "0.45.0", "author": "Eric Fennis", "description": "A Lucide icon library package for Vue 2 applications", "license": "ISC", diff --git a/packages/lucide/package.json b/packages/lucide/package.json index f83d0bf55..6e16313f4 100644 --- a/packages/lucide/package.json +++ b/packages/lucide/package.json @@ -1,7 +1,7 @@ { "name": "lucide", "description": "A Lucide icon library package for web and javascript applications.", - "version": "0.37.0", + "version": "0.45.0", "license": "ISC", "homepage": "https://lucide.dev", "bugs": "https://github.com/lucide-icons/lucide/issues", diff --git a/site/src/components/CustomizeIconContext.tsx b/site/src/components/CustomizeIconContext.tsx index 00de9c9e9..dbebb31ea 100644 --- a/site/src/components/CustomizeIconContext.tsx +++ b/site/src/components/CustomizeIconContext.tsx @@ -1,4 +1,6 @@ -import { createContext, useState } from 'react'; +import { createContext, useRef, useState, MutableRefObject, useContext, useMemo } from 'react'; + +type IconsRef = Record; interface ICustomIconStyle { color: string; @@ -8,13 +10,14 @@ interface ICustomIconStyle { size: number; setSize: (n: number) => void; resetStyle: () => void; + iconsRef: MutableRefObject; } const DEFAULT_STYLE = { color: 'currentColor', strokeWidth: 2, size: 24, -} +}; export const IconStyleContext = createContext({ color: 'currentColor', @@ -23,25 +26,43 @@ export const IconStyleContext = createContext({ setStroke: (n: number) => null, size: 24, setSize: (n: number) => null, - resetStyle: () => null + resetStyle: () => null, + iconsRef: { current: {} }, }); -export function CustomizeIconContext({ children }) { +export function CustomizeIconContext({ children }): JSX.Element { + const iconsRef = useRef({}); const [color, setColor] = useState(DEFAULT_STYLE.color); const [stroke, setStroke] = useState(DEFAULT_STYLE.strokeWidth); const [size, setSize] = useState(DEFAULT_STYLE.size); - function resetStyle(){ + function resetStyle() { setColor(DEFAULT_STYLE.color); setStroke(DEFAULT_STYLE.strokeWidth); setSize(DEFAULT_STYLE.size); } - return ( - - {children} - + const value = useMemo( + () => ({ + color, + setColor, + strokeWidth: stroke, + setStroke, + size, + setSize, + resetStyle, + iconsRef, + }), + [color, setColor, stroke, setStroke, size, setSize, resetStyle, iconsRef], ); + + return {children}; +} + +export function useCustomizeIconContext(): ICustomIconStyle { + const context = useContext(IconStyleContext); + if (context === undefined) { + throw new Error('useCustomizeIconContext must be used within a IconStyleContextProvider'); + } + return context; } diff --git a/site/src/components/Header.tsx b/site/src/components/Header.tsx index 5ac74f349..8b5f35f3a 100644 --- a/site/src/components/Header.tsx +++ b/site/src/components/Header.tsx @@ -13,20 +13,49 @@ 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'; +import { useState } from 'react'; +import { useCustomizeIconContext } from './CustomizeIconContext'; +import { IconEntity } from '../types'; -function generateZip(icons) { +type IconContent = [icon: string, src:string] + +async function generateZip(icons: IconContent[]) { const zip = new JSZip(); - Object.values(icons).forEach(icon => - // @ts-ignore - zip.file(`${icon.name}.svg`, icon.src), + + const addingZipPromises = icons.map(([name, src]) => + zip.file(`${name}.svg`, src), ); + + await Promise.all(addingZipPromises) + return zip.generateAsync({ type: 'blob' }); } -const Header = ({ data }) => { +interface HeaderProps { + data: IconEntity[]; +} + +const Header = ({ data }: HeaderProps) => { + const [zippingIcons, setZippingIcons] = useState(false); + const { iconsRef } = useCustomizeIconContext(); + const downloadAllIcons = async () => { - const zip = await generateZip(data); + console.log(iconsRef); + setZippingIcons(true); + + let iconEntries: IconContent[] = Object.entries(iconsRef.current).map(([name, svgEl]) => [ + name, + svgEl.outerHTML, + ]); + + // Fallback + if (iconEntries.length === 0) { + iconEntries = data.map(icon => [icon.name, icon.src]); + } + + const zip = await generateZip(iconEntries); download(zip, 'lucide.zip'); + setZippingIcons(false); }; const repositoryUrl = 'https://github.com/lucide-icons/lucide'; @@ -76,7 +105,7 @@ const Header = ({ data }) => { name: 'lucide-laravel', Logo: LaravelLogo, href: 'https://github.com/mallardduck/blade-lucide-icons', - } + }, ]; return ( @@ -124,7 +153,13 @@ const Header = ({ data }) => { - diff --git a/site/src/components/IconListItem.tsx b/site/src/components/IconListItem.tsx index b7ab134c0..cf5c32747 100644 --- a/site/src/components/IconListItem.tsx +++ b/site/src/components/IconListItem.tsx @@ -1,8 +1,8 @@ -import { Box, Button, ButtonProps, Flex, Text, useToast } from '@chakra-ui/react'; +import { Button, ButtonProps, Flex, Text, useToast } from '@chakra-ui/react'; import download from 'downloadjs'; import copy from 'copy-to-clipboard'; -import { memo, useContext } from 'react'; -import { IconStyleContext } from './CustomizeIconContext'; +import { memo } from 'react'; +import { useCustomizeIconContext } from './CustomizeIconContext'; import { IconWrapper } from './IconWrapper'; interface IconListItemProps { @@ -13,9 +13,9 @@ interface IconListItemProps { onClick?: ButtonProps['onClick']; } -const IconListItem = ({ name, content, src, onClick }: IconListItemProps) => { +const IconListItem = ({ name, content, onClick, src: svg }: IconListItemProps) => { const toast = useToast(); - const { color, size, strokeWidth } = useContext(IconStyleContext); + const { color, size, strokeWidth, iconsRef } = useCustomizeIconContext(); return (