Compare commits

..

8 Commits

Author SHA1 Message Date
Eric Fennis
8ab6f80e4f Add headset icon (#1780)
* Add headset icon

* Fix lint errors

* Revert headset change
2024-01-30 10:08:59 +01:00
Jordan Long
a5221c236a Add story icon (#1820)
* Add story icon

* Split single path into multiple elements

* Refine icons/story.svg

Co-authored-by: Jakob Guddas <github@jguddas.de>

* Update contributors to icons/story.json

Co-authored-by: Jakob Guddas <github@jguddas.de>

* Change "story" icon name to "circle-fading-plus" and add to shapes category

---------

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
Co-authored-by: Jakob Guddas <github@jguddas.de>
2024-01-30 09:30:44 +01:00
Jordan Long
cdd32b5294 Add ambulance icon (#1819)
* Add ambulance icon

* Remove extra attributes and connect path under wheels

* Lift roof and "+" to adhere to 2px gap rule for icons/ambulance.svg

Co-authored-by: Jakob Guddas <github@jguddas.de>

* Increase cab height of ambulance

* Add contributors from truck icon

---------

Co-authored-by: Jakob Guddas <github@jguddas.de>
2024-01-29 19:50:04 +01:00
CokaKoala
54c8d4078d fix: Add the license banner inside of the script tag instead of an HTML comment (#1811)
* add banner inside of the script tag instead

* renamed script

* Update packages/lucide-svelte/scripts/license.mjs

Co-authored-by: Jakob Guddas <github@jguddas.de>

* Update packages/lucide-svelte/scripts/appendLicense.mjs

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>

* renamed file

---------

Co-authored-by: Jakob Guddas <github@jguddas.de>
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
2024-01-29 19:48:14 +01:00
Daniel Bayley
3302870983 Refine helping-hand/add hand-* icons (#1328)
* Refine `helping-hand` icon

* Add `hand-platter` icon

* Add `hand-coins` (savings) icon

* Add `hand-heart` icon

* Fix/optimise `helping-hand` icon

* Fix/optimise `hand-coins` icon

* Fix/optimise `hand-heart` icon

* Rename `helping-hand` to `hand-helping`

* Fix/optimise `hand-platter` icon

* Add `thumbs-up-down` icon

* Improve `thumbs-up`/`down` icons metadata

* Improve metadata

* Delete thumbs-up-down icons

---------

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
2024-01-26 10:10:19 +01:00
Karsa
0f25ee86a0 Fix fills in smaller dots (#1436)
* Fixes palette

* Fixing fill on circles

* Fixing fills

* Revert tractor fill

---------

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
2024-01-26 09:58:05 +01:00
Jakob Guddas
28686b5bd5 feat: added webhook-off icon (#1566)
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
2024-01-25 08:54:18 +01:00
Eric Fennis
8cc143915c Update JSdoc lucide svelte (#1826) 2024-01-25 08:23:34 +01:00
45 changed files with 912 additions and 130 deletions

30
icons/ambulance.json Normal file
View File

@@ -0,0 +1,30 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"jordan808",
"jguddas",
"colebemis",
"ahtohbi4",
"ericfennis",
"Andreto",
"csandman",
"karsa-mistmere",
"danielbayley"
],
"tags": [
"ambulance",
"emergency",
"medical",
"vehicle",
"siren",
"healthcare",
"transportation",
"rescue",
"urgent",
"first aid"
],
"categories": [
"medical",
"transportation"
]
}

20
icons/ambulance.svg Normal file
View File

@@ -0,0 +1,20 @@
<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="M10 10H6" />
<path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2" />
<path
d="M19 18h2a1 1 0 0 0 1-1v-3.28a1 1 0 0 0-.684-.948l-1.923-.641a1 1 0 0 1-.578-.502l-1.539-3.076A1 1 0 0 0 16.382 8H14" />
<path d="M8 8v4" />
<path d="M9 18h6" />
<circle cx="17" cy="18" r="2" />
<circle cx="7" cy="18" r="2" />
</svg>

After

Width:  |  Height:  |  Size: 553 B

View File

@@ -0,0 +1,22 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"jordan808",
"jguddas"
],
"tags": [
"stories",
"social media",
"instagram",
"facebook",
"meta",
"snapchat",
"sharing",
"content"
],
"categories": [
"communication",
"social",
"shapes"
]
}

View File

@@ -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"
>
<path d="M12 2a10 10 0 0 1 7.38 16.75" />
<path d="M12 8v8" />
<path d="M16 12H8" />
<path d="M2.5 8.875a10 10 0 0 0-.5 3" />
<path d="M2.83 16a10 10 0 0 0 2.43 3.4" />
<path d="M4.636 5.235a10 10 0 0 1 .891-.857" />
<path d="M8.644 21.42a10 10 0 0 0 7.631-.38" />
</svg>

After

Width:  |  Height:  |  Size: 486 B

View File

@@ -11,7 +11,7 @@
>
<path d="m20 7 1.7-1.7a1 1 0 0 0 0-1.4l-1.6-1.6a1 1 0 0 0-1.4 0L17 4v3Z" />
<path d="m17 7-5.1 5.1" />
<circle cx="11.5" cy="12.5" r=".5" />
<circle cx="11.5" cy="12.5" r=".5" fill="currentColor" />
<path d="M6 12a2 2 0 0 0 1.8-1.2l.4-.9C8.7 8.8 9.8 8 11 8c2.8 0 5 2.2 5 5 0 1.2-.8 2.3-1.9 2.8l-.9.4A2 2 0 0 0 12 18a4 4 0 0 1-4 4c-3.3 0-6-2.7-6-6a4 4 0 0 1 4-4" />
<path d="m6 16 2 2" />
</svg>

Before

Width:  |  Height:  |  Size: 548 B

After

Width:  |  Height:  |  Size: 568 B

27
icons/hand-coins.json Normal file
View File

@@ -0,0 +1,27 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"danielbayley",
"kayleyhill"
],
"tags": [
"savings",
"banking",
"money",
"finance",
"offers",
"mortgage",
"payment",
"received",
"wage",
"payroll",
"allowance",
"pocket money",
"handout",
"pennies"
],
"categories": [
"money",
"account"
]
}

17
icons/hand-coins.svg Normal file
View File

@@ -0,0 +1,17 @@
<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="M11 15h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 17" />
<path d="m7 21 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9" />
<path d="m2 16 6 6" />
<circle cx="16" cy="9" r="2.9" />
<circle cx="6" cy="5" r="3" />
</svg>

After

Width:  |  Height:  |  Size: 473 B

15
icons/hand-heart.json Normal file
View File

@@ -0,0 +1,15 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"danielbayley",
"kayleyhill"
],
"tags": [
"love",
"like",
"emotion"
],
"categories": [
"social"
]
}

16
icons/hand-heart.svg Normal file
View File

@@ -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="M11 14h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 16" />
<path d="m7 20 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9" />
<path d="m2 15 6 6" />
<path d="M19.5 8.5c.7-.7 1.5-1.6 1.5-2.7A2.73 2.73 0 0 0 16 4a2.78 2.78 0 0 0-5 1.8c0 1.2.8 2 1.5 2.8L16 12Z" />
</svg>

After

Width:  |  Height:  |  Size: 519 B

View File

@@ -2,7 +2,8 @@
"$schema": "../icon.schema.json",
"contributors": [
"karsa-mistmere",
"jguddas"
"jguddas",
"danielbayley"
],
"tags": [
"agreement",
@@ -14,5 +15,8 @@
],
"categories": [
"emoji"
],
"aliases": [
"helping-hand"
]
}

15
icons/hand-helping.svg Normal file
View File

@@ -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="M11 12h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 14" />
<path d="m7 18 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9" />
<path d="m2 13 6 6" />
</svg>

After

Width:  |  Height:  |  Size: 404 B

22
icons/hand-platter.json Normal file
View File

@@ -0,0 +1,22 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"danielbayley"
],
"tags": [
"waiter",
"waitress",
"restaurant",
"table service",
"served",
"dinner",
"dining",
"meal",
"course",
"luxury"
],
"categories": [
"food-beverage",
"people"
]
}

18
icons/hand-platter.svg Normal file
View File

@@ -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="M12 3V2" />
<path d="M5 10a7.1 7.1 0 0 1 14 0" />
<path d="M4 10h16" />
<path d="M2 14h12a2 2 0 1 1 0 4h-2" />
<path d="m15.4 17.4 3.2-2.8a2 2 0 0 1 2.8 2.9l-3.6 3.3c-.7.8-1.7 1.2-2.8 1.2h-4c-1.1 0-2.1-.4-2.8-1.2L5 18" />
<path d="M5 14v7H2" />
</svg>

After

Width:  |  Height:  |  Size: 474 B

27
icons/headset.json Normal file
View File

@@ -0,0 +1,27 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"ericfennis"
],
"tags": [
"music",
"audio",
"sound",
"gaming",
"headphones",
"headset",
"call",
"center",
"phone",
"telephone",
"voip",
"video"
],
"categories": [
"multimedia",
"connectivity",
"devices",
"files",
"gaming"
]
}

View File

@@ -9,6 +9,6 @@
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m3 15 5.12-5.12A3 3 0 0 1 10.24 9H13a2 2 0 1 1 0 4h-2.5m4-.68 4.17-4.89a1.88 1.88 0 0 1 2.92 2.36l-4.2 5.94A3 3 0 0 1 14.96 17H9.83a2 2 0 0 0-1.42.59L7 19" />
<path d="m2 14 6 6" />
<path d="M3 11h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5Zm0 0a9 9 0 1 1 18 0m0 0v5a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3Z" />
<path d="M21 16v2a4 4 0 0 1-4 4h-5" />
</svg>

Before

Width:  |  Height:  |  Size: 403 B

After

Width:  |  Height:  |  Size: 398 B

View File

@@ -10,5 +10,5 @@
stroke-linejoin="round"
>
<path d="M2 18v3c0 .6.4 1 1 1h4v-3h3v-3h2l1.4-1.4a6.5 6.5 0 1 0-4-4Z" />
<circle cx="16.5" cy="7.5" r=".5" />
<circle cx="16.5" cy="7.5" r=".5" fill="currentColor" />
</svg>

Before

Width:  |  Height:  |  Size: 322 B

After

Width:  |  Height:  |  Size: 342 B

View File

@@ -9,9 +9,9 @@
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="13.5" cy="6.5" r=".5" />
<circle cx="17.5" cy="10.5" r=".5" />
<circle cx="8.5" cy="7.5" r=".5" />
<circle cx="6.5" cy="12.5" r=".5" />
<circle cx="13.5" cy="6.5" r=".5" fill="currentColor" />
<circle cx="17.5" cy="10.5" r=".5" fill="currentColor" />
<circle cx="8.5" cy="7.5" r=".5" fill="currentColor" />
<circle cx="6.5" cy="12.5" r=".5" fill="currentColor" />
<path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" />
</svg>

Before

Width:  |  Height:  |  Size: 596 B

After

Width:  |  Height:  |  Size: 676 B

View File

@@ -9,10 +9,10 @@
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="7.5" cy="7.5" r=".5" />
<circle cx="18.5" cy="5.5" r=".5" />
<circle cx="11.5" cy="11.5" r=".5" />
<circle cx="7.5" cy="16.5" r=".5" />
<circle cx="17.5" cy="14.5" r=".5" />
<circle cx="7.5" cy="7.5" r=".5" fill="currentColor" />
<circle cx="18.5" cy="5.5" r=".5" fill="currentColor" />
<circle cx="11.5" cy="11.5" r=".5" fill="currentColor" />
<circle cx="7.5" cy="16.5" r=".5" fill="currentColor" />
<circle cx="17.5" cy="14.5" r=".5" fill="currentColor" />
<path d="M3 3v18h18" />
</svg>

Before

Width:  |  Height:  |  Size: 430 B

After

Width:  |  Height:  |  Size: 530 B

View File

@@ -13,6 +13,7 @@
],
"categories": [
"account",
"social"
"social",
"emoji"
]
}

View File

@@ -13,6 +13,7 @@
],
"categories": [
"account",
"social"
"social",
"emoji"
]
}

View File

@@ -10,13 +10,13 @@
stroke-linejoin="round"
>
<rect width="18" height="18" x="3" y="3" rx="2" />
<circle cx="7.5" cy="7.5" r=".5" />
<circle cx="7.5" cy="7.5" r=".5" fill="currentColor" />
<path d="m7.9 7.9 2.7 2.7" />
<circle cx="16.5" cy="7.5" r=".5" />
<circle cx="16.5" cy="7.5" r=".5" fill="currentColor" />
<path d="m13.4 10.6 2.7-2.7" />
<circle cx="7.5" cy="16.5" r=".5" />
<circle cx="7.5" cy="16.5" r=".5" fill="currentColor" />
<path d="m7.9 16.1 2.7-2.7" />
<circle cx="16.5" cy="16.5" r=".5" />
<circle cx="16.5" cy="16.5" r=".5" fill="currentColor" />
<path d="m13.4 13.4 2.7 2.7" />
<circle cx="12" cy="12" r="2" />
</svg>

Before

Width:  |  Height:  |  Size: 585 B

After

Width:  |  Height:  |  Size: 665 B

17
icons/webhook-off.json Normal file
View File

@@ -0,0 +1,17 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"karsa-mistmere",
"jguddas"
],
"tags": [
"push api",
"interface",
"callback"
],
"categories": [
"development",
"social",
"account"
]
}

19
icons/webhook-off.svg Normal file
View File

@@ -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"
>
<path d="M17 17h-5c-1.09-.02-1.94.92-2.5 1.9A3 3 0 1 1 2.57 15" />
<path d="M9 3.4a4 4 0 0 1 6.52.66" />
<path d="m6 17 3.1-5.8a2.5 2.5 0 0 0 .057-2.05" />
<path d="M20.3 20.3a4 4 0 0 1-2.3.7" />
<path d="M18.6 13a4 4 0 0 1 3.357 3.414" />
<path d="m12 6 .6 1" />
<path d="m2 2 20 20" />
</svg>

After

Width:  |  Height:  |  Size: 510 B

View File

@@ -50,7 +50,7 @@
"clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.svelte && rm -f index.js",
"build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mjs --exportFileName=index.ts --iconFileExtension=.svelte --importImportFileExtension=.svelte --withAliases --aliasesFileExtension=.ts --aliasImportFileExtension=.svelte --pretty=false",
"build:package": "svelte-package --input ./src",
"build:license": "node ./scripts/addLicense.mjs",
"build:license": "node ./scripts/appendBlockComments.mjs",
"test": "vitest run",
"version": "pnpm version --git-tag-version=false"
},

View File

@@ -1,13 +1,8 @@
import { getCurrentDirPath } from '../../../scripts/helpers.mjs';
import { lstatSync } from 'fs';
import { readdir, readFile, writeFile } from 'fs/promises';
import path from 'path';
import pkg from '../package.json' assert { type: 'json' };
const BANNER = `@license ${pkg.name} v${pkg.version} - ${pkg.license}
This source code is licensed under the ${pkg.license} license.
See the LICENSE file in the root directory of this source tree.`;
import { getCurrentDirPath } from '../../../scripts/helpers.mjs';
import { getJSBanner } from './license.mjs';
const currentDir = getCurrentDirPath(import.meta.url);
const targetDirectory = path.join(currentDir, '../dist');
@@ -32,21 +27,16 @@ for (const file of files) {
license = getJSBanner();
}
if (/\.svelte/.test(ext)) {
license = getSvelteBanner();
}
if (license) {
newContents = license + contents;
}
// Places icon block comment at the top of the Svelte component class
if(/icons\/(.*?)\.svelte\.d\.ts/.test(filepath)) {
const svelteFilepath = filepath.replace('.d.ts', '')
if (/icons\/(.*?)\.svelte\.d\.ts/.test(filepath)) {
const svelteFilepath = filepath.replace('.d.ts', '');
let svelteFileContents = await readFile(svelteFilepath, { encoding: 'utf-8' });
const blockCommentRegex = /\/\*\*[\s\S]*?\*\//;
const blockCommentRegex = /\/\*\*\n\s\*\s(@component\s@name)[\s\S]*?\*\//;
const blockCommentMatch = blockCommentRegex.exec(svelteFileContents);
if (blockCommentMatch !== null) {
@@ -55,26 +45,15 @@ for (const file of files) {
const exportClassRegex = /export default class (\w+) extends SvelteComponentTyped<(.*?)> {/;
if (exportClassRegex.test(newContents)) {
newContents = newContents.replace(exportClassRegex, `${blockComment}\nexport default class $1 extends SvelteComponentTyped<$2> {`);
newContents = newContents.replace(
exportClassRegex,
`${blockComment}\nexport default class $1 extends SvelteComponentTyped<$2> {`
);
}
}
}
if(newContents !== contents) {
if (newContents !== contents) {
await writeFile(filepath, newContents, { encoding: 'utf-8' });
}
}
function getJSBanner() {
return `/**
* ${BANNER}
*/
\n`;
}
function getSvelteBanner() {
return `<!--
${BANNER}
-->
\n`;
}

View File

@@ -1,5 +1,6 @@
/* eslint-disable import/no-extraneous-dependencies */
import base64SVG from '@lucide/build-icons/utils/base64SVG.mjs';
import { getJSBanner } from './license.mjs';
export default ({ iconName, children, componentName, getSvg, deprecated }) => {
const svgContents = getSvg();
@@ -7,6 +8,7 @@ export default ({ iconName, children, componentName, getSvg, deprecated }) => {
return `\
<script lang="ts">
${getJSBanner()}
import Icon from '../Icon.svelte';
import type { IconNode, IconProps } from '../types.js';
@@ -22,7 +24,7 @@ const iconNode: IconNode = ${JSON.stringify(children)};
* @see https://lucide.dev/guide/packages/lucide-svelte - Documentation
*
* @param {Object} props - Lucide icons props and any valid SVG attribute
* @returns {FunctionalComponent} Vue component
* @returns {FunctionalComponent} Svelte component
* ${deprecated ? '@deprecated' : ''}
*/
</script>

View File

@@ -0,0 +1,11 @@
import pkg from '../package.json' assert { type: 'json' };
export function getJSBanner() {
return `/**
* @license ${pkg.name} v${pkg.version} - ${pkg.license}
*
* This source code is licensed under the ${pkg.license} license.
* See the LICENSE file in the root directory of this source tree.
*/
`;
}

View File

@@ -4,13 +4,14 @@ import defaultAttributes from './defaultAttributes';
// Create interface extending SVGAttributes
export interface SVGProps extends Partial<SVGAttributes> {
size?: 24 | number;
strokeWidth?: number | string;
absoluteStrokeWidth?: boolean;
size?: 24 | number
strokeWidth?: number | string
absoluteStrokeWidth?: boolean
}
export type IconNode = [elementName: string, attrs: Record<string, string>][];
export type Icon = FunctionalComponent<SVGProps>;
export type IconNode = [elementName: string, attrs: Record<string, string>][]
export type Icon = FunctionalComponent<SVGProps>
/**
* Converts string to KebabCase
* Copied from scripts/helper. If anyone knows how to properly import it here
@@ -19,31 +20,29 @@ export type Icon = FunctionalComponent<SVGProps>;
* @param {string} string
* @returns {string} A kebabized string
*/
export const toKebabCase = (string: string) =>
string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
export const toKebabCase = (string: string) => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
const createLucideIcon =
(iconName: string, iconNode: IconNode): Icon =>
(
{ size, strokeWidth = 2, absoluteStrokeWidth, color, class: classes, ...props }, // props
{ attrs, slots }, // context
const createLucideIcon = (iconName: string, iconNode: IconNode): Icon => (
{ size, strokeWidth = 2, absoluteStrokeWidth, color, class: classes, ...props }, // props
{ attrs, slots } // context
) => {
return h(
'svg',
{
...defaultAttributes,
width: size || defaultAttributes.width,
height: size || defaultAttributes.height,
stroke: color || defaultAttributes.stroke,
'stroke-width': absoluteStrokeWidth
? (Number(strokeWidth) * 24) / Number(size)
: strokeWidth,
...attrs,
class: ['lucide', `lucide-${toKebabCase(iconName)}`],
...props,
},
[...iconNode.map((child) => h(...child)), ...(slots.default ? [slots.default()] : [])],
);
};
return h(
'svg',
{
...defaultAttributes,
width: size || defaultAttributes.width,
height: size || defaultAttributes.height,
stroke: color || defaultAttributes.stroke,
'stroke-width': absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
...attrs,
class: ['lucide', `lucide-${toKebabCase(iconName)}`],
...props,
},
[
...iconNode.map(child => h(...child)),
...(slots.default ? [slots.default()] : [])
],
);
};
export default createLucideIcon;

View File

@@ -1,19 +1,21 @@
# Lucide Vue
Implementation of the lucide icon library for Vue 3 applications.
Implementation of the lucide icon library for Vue applications.
> What is lucide? Read it [here](https://github.com/lucide-icons/lucide#what-is-lucide).
> :warning: This version of lucide is for Vue 2, For Vue 3 got to [lucide-vue-next](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-vue-next#lucide-vue-next)
## Installation
```sh
yarn add @lucide/vue
yarn add lucide-vue
```
or
```sh
npm install @lucide/vue
npm install lucide-vue
```
## How to use
@@ -32,7 +34,7 @@ You can pass additional props to adjust the icon.
<script>
// Returns Vue component
import { Camera } from '@lucide/vue';
import { Camera } from 'lucide-vue';
export default {
name: 'My Component',
@@ -75,7 +77,7 @@ It is possible to create one generic icon component to load icons.
</template>
<script>
import * as icons from '@lucide/vue';
import * as icons from 'lucide-vue';
export default {
props: {
@@ -102,3 +104,25 @@ export default {
</div>
</template>
```
## Use with [@nuxt/components](https://github.com/nuxt/components#readme)
### Setup
In your `nuxt.config.js`, add `lucide-vue/nuxt` to your `buildModules`
```js
export default {
buildModules: ['lucide-vue/nuxt']
};
```
### How to use
Icon components are prefixed with `Icon`. Use icon components without importing them.
### Example
```html
<IconCamera color="red" :size="32" />
```

View File

@@ -0,0 +1,11 @@
import { join } from 'path';
export default function LucideNuxtPlugin() {
this.nuxt.hook('components:dirs', (dirs) => {
dirs.push({
path: join(__dirname, 'dist', 'esm', 'icons'),
prefix: 'Icon',
ignore: ['**/index.js'],
});
});
}

View File

@@ -1,15 +1,15 @@
{
"name": "@lucide/vue",
"name": "lucide-vue",
"version": "0.0.1",
"author": "Eric Fennis",
"description": "A Lucide icon library package for Vue 3 applications",
"description": "A Lucide icon library package for Vue 2 applications",
"license": "ISC",
"homepage": "https://lucide.dev",
"bugs": "https://github.com/lucide-icons/lucide/issues",
"repository": {
"type": "git",
"url": "https://github.com/lucide-icons/lucide.git",
"directory": "packages/vue"
"directory": "packages/lucide-vue"
},
"keywords": [
"Lucide",
@@ -22,13 +22,12 @@
"Fontawesome",
"Font Awesome"
],
"amdName": "lucide-vue-next",
"source": "build/lucide-vue-next.js",
"main": "dist/cjs/lucide-vue-next.js",
"main:umd": "dist/umd/lucide-vue-next.js",
"module": "dist/esm/lucide-vue-next.js",
"unpkg": "dist/umd/lucide-vue-next.min.js",
"typings": "dist/lucide-vue-next.d.ts",
"amdName": "lucide-vue",
"source": "build/lucide-vue.js",
"main": "dist/cjs/lucide-vue.js",
"main:umd": "dist/umd/lucide-vue.js",
"module": "dist/esm/lucide-vue.js",
"unpkg": "dist/umd/lucide-vue.min.js",
"sideEffects": false,
"files": [
"dist",
@@ -37,7 +36,7 @@
"scripts": {
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundles",
"copy:license": "cp ../../LICENSE ./LICENSE",
"clean": "rm -rf dist && rm -rf ./src/icons/*.ts",
"clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
"build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey --withAliases --aliasesFileExtension=.ts --iconFileExtension=.ts --exportFileName=index.ts",
"build:bundles": "rollup -c ./rollup.config.mjs",
"test": "vitest run",
@@ -46,17 +45,18 @@
"devDependencies": {
"@lucide/build-icons": "workspace:*",
"@lucide/rollup-plugins": "workspace:*",
"@testing-library/jest-dom": "^6.1.6",
"@testing-library/vue": "^8.0.1",
"@vitejs/plugin-vue": "^4.6.2",
"@vue/test-utils": "2.4.3",
"rollup": "^4.9.2",
"rollup-plugin-dts": "^6.1.0",
"@testing-library/jest-dom": "^6.1.4",
"@testing-library/vue": "^5.9.0",
"@vitejs/plugin-vue2": "2.2.0",
"@vue/test-utils": "1.3.0",
"rollup": "^3.23.0",
"typescript": "^4.9.5",
"vite": "5.0.12",
"vitest": "^1.1.1",
"vue": "^3.0.1"
"vitest": "^0.32.2",
"vue": "2.7.14",
"vue-template-compiler": "2.7.14"
},
"peerDependencies": {
"vue": ">=3.0.1"
"vue": "^2.6.12"
}
}

View File

@@ -1,6 +1,5 @@
import plugins, { replace } from '@lucide/rollup-plugins';
import pkg from './package.json' assert { type: 'json' };
import dts from "rollup-plugin-dts";
const packageName = 'LucideVue';
const outputFileName = 'lucide-vue';
@@ -57,19 +56,4 @@ const configs = bundles
)
.flat();
export default [
{
input: inputs[0],
output: [{
file: `dist/${outputFileName}.d.ts`, format: "es"
}],
plugins: [
dts({
compilerOptions: {
preserveSymlinks: false
}
})
],
},
...configs
];
export default configs;

View File

@@ -0,0 +1,26 @@
/* eslint-disable import/no-extraneous-dependencies */
import base64SVG from '@lucide/build-icons/utils/base64SVG.mjs';
export default ({ componentName, iconName, children, getSvg, deprecated }) => {
const svgContents = getSvg();
const svgBase64 = base64SVG(svgContents);
return `
import createLucideIcon from '../createLucideIcon';
/**
* @component @name ${componentName}
* @description Lucide SVG icon component, renders SVG Element with children.
*
* @preview ![img](data:image/svg+xml;base64,${svgBase64}) - https://lucide.dev/icons/${iconName}
* @see https://lucide.dev/guide/packages/lucide-vue - Documentation
*
* @param {Object} props - Lucide icons props and any valid SVG attribute
* @returns {Component} Vue Component
* ${deprecated ? '@deprecated' : ''}
*/
const ${componentName} = createLucideIcon('${componentName}Icon', ${JSON.stringify(children)});
export default ${componentName};
`;
};

View File

@@ -0,0 +1,84 @@
import { Component } from 'vue';
import { Vue, VueConfiguration } from 'vue/types/vue';
import defaultAttributes from './defaultAttributes';
var showDeprecationWarning = true;
type IconNode = [elementName: string, attrs: Record<string, string>][]
/**
* Converts string to KebabCase
* Copied from scripts/helper. If anyone knows how to properly import it here
* then please fix it.
*
* @param {string} string
* @returns {string} A kebabized string
*/
export const toKebabCase = (string: string) => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
export default (iconName: string, iconNode: IconNode): Component => ({
name: iconName,
functional: true,
props: {
color: {
type: String,
default: 'currentColor',
},
size: {
type: Number,
default: 24,
},
strokeWidth: {
type: Number,
default: 2,
},
absoluteStrokeWidth: {
type: Boolean,
default: false,
},
defaultClass: {
type: String,
default: `lucide-icon lucide lucide-${toKebabCase(iconName).replace('-icon', '')}`,
},
},
render(
createElement,
{
props: { color, size, strokeWidth, absoluteStrokeWidth, defaultClass },
data,
children = [],
},
) {
if (showDeprecationWarning) {
console.warn(
'[Lucide Vue] This package will be deprecated end of 2023. Please upgrade to Vue 3 and use the latest lucide package for Vue.',
);
showDeprecationWarning = false;
}
return createElement(
'svg',
{
// prettier-ignore
class: [defaultClass, data.class, data.staticClass, data.attrs && data.attrs.class].filter(Boolean),
style: [data.style, data.staticStyle, data.attrs && data.attrs.style].filter(Boolean),
attrs: {
...defaultAttributes,
width: size,
height: size,
stroke: color,
'stroke-width':
absoluteStrokeWidth
? Number(strokeWidth) * 24 / Number(size)
: strokeWidth,
...data.attrs,
},
on: data?.on || {}
},
[
...iconNode.map(([tag, attrs]) => createElement(String(tag), { attrs })),
...children
],
);
},
});

View File

@@ -0,0 +1,13 @@
const defaultAttributes = {
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',
};
export default defaultAttributes

View File

@@ -0,0 +1 @@
Folder for generated icons

View File

@@ -0,0 +1,3 @@
export * from './icons';
export * as icons from './icons';
export * from './aliases';

View File

@@ -0,0 +1,215 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Using lucide icon components > should add a class to the element 1`] = `
<div>
<svg
class="lucide-icon lucide lucide-smile my-icon"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
key="1mglay"
r="10"
/>
<path
d="M8 14s1.5 2 4 2 4-2 4-2"
key="1y1vjs"
/>
<line
key="yxxnd0"
x1="9"
x2="9.01"
y1="9"
y2="9"
/>
<line
key="1p4y9e"
x1="15"
x2="15.01"
y1="9"
y2="9"
/>
</svg>
</div>
`;
exports[`Using lucide icon components > should add a style attribute to the element 1`] = `
<div>
<svg
class="lucide-icon lucide lucide-smile"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
style="position: absolute"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
key="1mglay"
r="10"
/>
<path
d="M8 14s1.5 2 4 2 4-2 4-2"
key="1y1vjs"
/>
<line
key="yxxnd0"
x1="9"
x2="9.01"
y1="9"
y2="9"
/>
<line
key="1p4y9e"
x1="15"
x2="15.01"
y1="9"
y2="9"
/>
</svg>
</div>
`;
exports[`Using lucide icon components > should adjust the size, stroke color and stroke width 1`] = `
<div>
<svg
class="lucide-icon lucide lucide-smile"
fill="none"
height="48"
stroke="red"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="4"
viewBox="0 0 24 24"
width="48"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
key="1mglay"
r="10"
/>
<path
d="M8 14s1.5 2 4 2 4-2 4-2"
key="1y1vjs"
/>
<line
key="yxxnd0"
x1="9"
x2="9.01"
y1="9"
y2="9"
/>
<line
key="1p4y9e"
x1="15"
x2="15.01"
y1="9"
y2="9"
/>
</svg>
</div>
`;
exports[`Using lucide icon components > should pass children to the icon slot 1`] = `
<div>
<svg
class="lucide-icon lucide lucide-smile"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
key="1mglay"
r="10"
/>
<path
d="M8 14s1.5 2 4 2 4-2 4-2"
key="1y1vjs"
/>
<line
key="yxxnd0"
x1="9"
x2="9.01"
y1="9"
y2="9"
/>
<line
key="1p4y9e"
x1="15"
x2="15.01"
y1="9"
y2="9"
/>
<text>
Hello World
</text>
</svg>
</div>
`;
exports[`Using lucide icon components > should render an component 1`] = `
<div>
<svg
class="lucide-icon lucide lucide-smile"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
key="1mglay"
r="10"
/>
<path
d="M8 14s1.5 2 4 2 4-2 4-2"
key="1y1vjs"
/>
<line
key="yxxnd0"
x1="9"
x2="9.01"
y1="9"
y2="9"
/>
<line
key="1p4y9e"
x1="15"
x2="15.01"
y1="9"
y2="9"
/>
</svg>
</div>
`;

View File

@@ -0,0 +1,133 @@
import { describe, it, expect, vi } from 'vitest';
import { render, fireEvent, cleanup } from '@testing-library/vue'
import { Smile, Pen, Edit2 } from '../src/lucide-vue'
import { afterEach } from 'vitest';
import { VueClass } from '@vue/test-utils';
describe('Using lucide icon components', () => {
afterEach(() => cleanup())
it('should render an component', () => {
const {container} = render(Smile as VueClass<any>)
expect(container).toMatchSnapshot();
});
it('should adjust the size, stroke color and stroke width', () => {
const {container} = render(Smile as VueClass<any>, {
props: {
size: 48,
color: 'red',
strokeWidth: 4
}
})
const [icon] = document.getElementsByClassName('lucide');
expect(icon.getAttribute('width')).toBe('48')
expect(icon.getAttribute('stroke')).toBe('red')
expect(icon.getAttribute('stroke-width')).toBe('4')
expect(container).toMatchSnapshot();
});
it('should add a class to the element', () => {
const {container} = render(Smile as VueClass<any>, {
attrs: {
class: "my-icon"
}
})
expect(container).toMatchSnapshot();
const [icon] = document.getElementsByClassName('lucide');
expect(icon).toHaveClass('my-icon')
expect(icon).toHaveClass('lucide-smile')
expect(icon).toHaveClass('lucide')
});
it('should add a style attribute to the element', () => {
const {container} = render(Smile as VueClass<any>, {
attrs: {
style: 'position: absolute',
}
})
expect(container).toMatchSnapshot();
const [icon] = document.getElementsByClassName('lucide');
expect(icon).toHaveStyle({ position: 'absolute' })
});
it('should call the onClick event', async () => {
const onClick = vi.fn()
render(Smile as VueClass<any>, {
listeners: {
click: onClick
}
})
const [icon] = document.getElementsByClassName('lucide');
await fireEvent.click(icon)
expect(onClick).toHaveBeenCalled()
});
it('should pass children to the icon slot', () => {
const testText = 'Hello World'
const template = `<text>${testText}</text>`
const { getByText, container } = render(Smile as VueClass<any>, {
slots: {
default: { template }
}
})
const textElement = getByText(testText)
expect(textElement).toBeInTheDocument()
expect(container).toMatchSnapshot();
});
it('should render the alias icon', () => {
const { getByText, container } = render(Pen as VueClass<any>, {
props: {
size: '48',
color: 'red',
strokeWidth: '4'
}
})
const PenIconRenderedHTML = container.innerHTML
cleanup()
const { container: Edit2Container } = render(Edit2 as VueClass<any>, {
props: {
size: '48',
color: 'red',
strokeWidth: '4'
}
})
expect(PenIconRenderedHTML).toBe(Edit2Container.innerHTML)
})
it('should not scale the strokeWidth when absoluteStrokeWidth is set', () => {
const { getByText, container } = render(Pen as VueClass<any>, {
props: {
size: '48',
color: 'red',
absoluteStrokeWidth: true
}
})
const [icon] = document.getElementsByClassName('lucide');
expect(icon.getAttribute('width')).toBe('48')
expect(icon.getAttribute('stroke')).toBe('red')
expect(icon.getAttribute('stroke-width')).toBe('1')
})
});

View File

@@ -0,0 +1 @@
import '@testing-library/jest-dom';

View File

@@ -11,6 +11,7 @@
"esModuleInterop": true,
"lib": ["ESNext", "DOM"],
"skipLibCheck": true,
"noEmit": true,
}
"noEmit": true
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
}

View File

@@ -1,11 +1,19 @@
import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'
import vue from '@vitejs/plugin-vue2'
export default defineConfig({
plugins: [vue()],
test: {
globals: true,
environment: 'jsdom',
transformMode: {
web: [/\.jsx?$/],
},
setupFiles: './tests/setupVitest.js',
threads: false,
isolate: false,
},
resolve: {
conditions: ['development', 'browser'],
},
});

View File

@@ -1 +0,0 @@
../lucide-vue-next/scripts

View File

@@ -1 +0,0 @@
../lucide-vue-next/src

View File

@@ -1 +0,0 @@
../lucide-vue-next/tests