Mirrors/lucide
1
0
Fork 0
mirror of https://github.com/lucide-icons/lucide.git synced 2025-12-16 21:57:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update dependencies and general improvements in packages (#1773)

Browse Source 
* update deps and vitest

* dedupe packages

* update package.json files

* Update to latest vite and vites

* Fix build

* Update lockfile
This commit is contained in:
Eric Fennis
2024-01-03 11:38:06 +01:00
committed by GitHub
parent 3fe74beeb0
commit faff6a8269
43 changed files with 3594 additions and 5041 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/lucide-figma/package.json
View File

@@ -23,8 +23,7 @@
"@types/react-dom": "^17.0.0",
"@vitejs/plugin-react": "^1.0.0",
"typescript": "^4.3.2",
"vite": "^4.4.12",
"vitest": "^0.32.2",
"vite": "5.0.10",
"vite-plugin-singlefile": "^0.5.1"
}
}

17
packages/lucide-preact/package.json
View File

@@ -12,7 +12,7 @@
},
"keywords": [
"Lucide",
"Angular",
"Preact",
"Feather",
"Icons",
"Icon",
@@ -33,11 +33,10 @@
],
"sideEffects": false,
"scripts": {
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundles && pnpm build:types",
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundles",
"copy:license": "cp ../../LICENSE ./LICENSE",
"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:types": "node ./scripts/buildTypes.mjs",
"build:bundles": "rollup -c ./rollup.config.mjs",
"test": "vitest run",
"version": "pnpm version --git-tag-version=false"
@@ -47,12 +46,14 @@
"@lucide/rollup-plugins": "workspace:*",
"@preact/preset-vite": "^2.7.0",
"@testing-library/jest-dom": "^6.1.4",
"@testing-library/preact": "^2.0.1",
"@testing-library/preact": "^3.2.3",
"jest-serializer-html": "^7.1.0",
"preact": "^10.19.2",
"rollup": "^3.29.4",
"typescript": "^4.9.5",
"vite": "^4.4.12",
"vitest": "^0.32.4"
"rollup": "^4.9.2",
"rollup-plugin-dts": "^6.1.0",
"typescript": "^5.3.3",
"vite": "5.0.10",
"vitest": "^1.1.1"
},
"peerDependencies": {
"preact": "^10.5.13"

16
packages/lucide-preact/rollup.config.mjs
View File

@@ -1,4 +1,5 @@
import plugins, { replace } from '@lucide/rollup-plugins';
import dts from "rollup-plugin-dts";
import pkg from './package.json' assert { type: "json" };
const packageName = 'LucidePreact';
@@ -49,7 +50,7 @@ const configs = bundles
),
...plugins(pkg, minify)
],
external: ['preact', 'prop-types'],
external: ['preact'],
output: {
name: packageName,
...(preserveModules
@@ -64,11 +65,20 @@ const configs = bundles
sourcemap: true,
globals: {
preact: 'preact',
'prop-types': 'PropTypes',
},
},
})),
)
.flat();
export default configs;
export default [
{
input: inputs[0],
output: [{
file: `dist/${outputFileName}.d.ts`, format: "es"
}],
plugins: [dts()],
},
...configs
];

92
packages/lucide-preact/scripts/buildTypes.mjs
View File

@@ -1,92 +0,0 @@
import path from 'path';
// eslint-disable-next-line import/no-extraneous-dependencies
import { getAliases } from '@lucide/build-icons';
import {
writeFile,
readSvgDirectory,
resetFile,
toPascalCase,
getCurrentDirPath,
} from '../../../scripts/helpers.mjs';
const currentDir = getCurrentDirPath(import.meta.url);
const srcDirectory = path.join(currentDir, '../dist');
const writeDeclarationFile = (typesFile, directory, content) => {
resetFile(typesFile, directory);
writeFile(content, typesFile, directory);
};
const ICONS_DIR = path.resolve(currentDir, '../../../icons');
const TYPES_FILE = 'lucide-preact.d.ts';
// Declare type definitions
let declarationFileContent = `\
/// <reference types="preact" />
import { JSX, RefObject } from 'preact'
interface LucideProps extends Partial<Omit<JSX.SVGAttributes, "ref" | "size">> {
key?: string | number;
ref?: string | ((component: any) => any) | RefObject<any>;
color?: string
size?: string | number
strokeWidth?: string | number
absoluteStrokeWidth?: boolean
}
export type LucideIcon = (props: LucideProps) => JSX.Element;
export type IconNode = [elementName: keyof ReactSVG, attrs: Record<string, string>][]
export declare const createLucideIcon: (iconName: string, iconNode: IconNode) => LucideIcon;
// Generated icons
`;
const svgFiles = readSvgDirectory(ICONS_DIR);
svgFiles.forEach((svgFile) => {
const iconName = path.basename(svgFile, '.svg');
const componentName = toPascalCase(iconName);
declarationFileContent += `export declare const ${componentName}: LucideIcon;\n`;
});
const aliases = await getAliases(ICONS_DIR);
declarationFileContent += `
// Generated icon aliases
`;
let aliasesCount = 0;
svgFiles.forEach((svgFile) => {
const iconName = path.basename(svgFile, '.svg');
const componentName = toPascalCase(iconName);
const iconAliases = aliases[iconName]?.aliases;
declarationFileContent += `// ${componentName} aliases\n`;
declarationFileContent += `export declare const ${componentName}Icon: LucideIcon;\n`;
declarationFileContent += `export declare const Lucide${componentName}: LucideIcon;\n`;
aliasesCount += 1;
if (iconAliases != null && Array.isArray(iconAliases)) {
iconAliases.forEach((alias) => {
const componentNameAlias = toPascalCase(alias);
declarationFileContent += `export declare const ${componentNameAlias}: LucideIcon;\n`;
aliasesCount += 1;
});
}
declarationFileContent += '\n';
});
writeDeclarationFile(TYPES_FILE, srcDirectory, declarationFileContent);
console.log(
`Generated ${TYPES_FILE} file with`,
svgFiles.length,
'icons and with',
aliasesCount,
'aliases',
);

10
packages/lucide-preact/src/createLucideIcon.ts
View File

@@ -1,15 +1,17 @@
import { ComponentType, FunctionComponent, h, JSX, RefObject, toChildArray } from 'preact';
import { type FunctionComponent, h, type JSX, toChildArray } from 'preact';
import defaultAttributes from './defaultAttributes';
type IconNode = [elementName: keyof JSX.IntrinsicElements, attrs: Record<string, string>][]
export type IconNode = [elementName: keyof JSX.IntrinsicElements, attrs: Record<string, string>][]
interface LucideProps extends Partial<Omit<JSX.SVGAttributes, "ref" | "size">> {
export interface LucideProps extends Partial<Omit<JSX.SVGAttributes, "ref" | "size">> {
color?: string
size?: string | number
strokeWidth?: string | number
absoluteStrokeWidth?: boolean
}
export type LucideIcon = FunctionComponent<LucideProps>
/**
* Converts string to KebabCase
* Copied from scripts/helper. If anyone knows how to properly import it here
@@ -20,7 +22,7 @@ interface LucideProps extends Partial<Omit<JSX.SVGAttributes, "ref" | "size">> {
*/
export const toKebabCase = (string: string) => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
const createLucideIcon = (iconName: string, iconNode: IconNode): FunctionComponent<LucideProps> => {
const createLucideIcon = (iconName: string, iconNode: IconNode): LucideIcon => {
const Component = (
{ color = 'currentColor', size = 24, strokeWidth = 2, absoluteStrokeWidth, children, class: classes = '', ...rest }: LucideProps
) =>

92
packages/lucide-preact/tests/__snapshots__/lucide-preact.spec.tsx.snap
View File

@@ -1,7 +1,93 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Using lucide icon components > should adjust the size, stroke color and stroke width 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid3x3 \\" data-testid=\\"grid-icon\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path d=\\"M3 9h18\\"></path><path d=\\"M3 15h18\\"></path><path d=\\"M9 3v18\\"></path><path d=\\"M15 3v18\\"></path></svg>"`;
exports[`Using lucide icon components > should adjust the size, stroke color and stroke width 1`] = `
<svg xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
viewbox="0 0 24 24"
fill="none"
stroke="red"
stroke-width="4"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-grid3x3 "
data-testid="grid-icon"
>
<rect width="18"
height="18"
x="3"
y="3"
rx="2"
>
</rect>
<path d="M3 9h18">
</path>
<path d="M3 15h18">
</path>
<path d="M9 3v18">
</path>
<path d="M15 3v18">
</path>
</svg>
`;
exports[`Using lucide icon components > should not scale the strokeWidth when absoluteStrokeWidth is set 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid3x3 \\" data-testid=\\"grid-icon\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path d=\\"M3 9h18\\"></path><path d=\\"M3 15h18\\"></path><path d=\\"M9 3v18\\"></path><path d=\\"M15 3v18\\"></path></svg>"`;
exports[`Using lucide icon components > should not scale the strokeWidth when absoluteStrokeWidth is set 1`] = `
<svg xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
viewbox="0 0 24 24"
fill="none"
stroke="red"
stroke-width="1"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-grid3x3 "
data-testid="grid-icon"
>
<rect width="18"
height="18"
x="3"
y="3"
rx="2"
>
</rect>
<path d="M3 9h18">
</path>
<path d="M3 15h18">
</path>
<path d="M9 3v18">
</path>
<path d="M15 3v18">
</path>
</svg>
`;
exports[`Using lucide icon components > should render an component 1`] = `"<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\\" class=\\"lucide lucide-grid3x3 \\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path d=\\"M3 9h18\\"></path><path d=\\"M3 15h18\\"></path><path d=\\"M9 3v18\\"></path><path d=\\"M15 3v18\\"></path></svg>"`;
exports[`Using lucide icon components > should render an component 1`] = `
<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"
class="lucide lucide-grid3x3 "
>
<rect width="18"
height="18"
x="3"
y="3"
rx="2"
>
</rect>
<path d="M3 9h18">
</path>
<path d="M3 15h18">
</path>
<path d="M9 3v18">
</path>
<path d="M15 3v18">
</path>
</svg>
`;

4
packages/lucide-preact/tests/setupVitest.js
View File

@@ -1 +1,5 @@
import { expect } from 'vitest'
import '@testing-library/jest-dom';
import htmlSerializer from 'jest-serializer-html'
expect.addSnapshotSerializer(htmlSerializer)

5
packages/lucide-preact/vitest.config.ts → packages/lucide-preact/vitest.config.mts
View File

@@ -6,12 +6,7 @@ export default defineConfig({
test: {
globals: true,
environment: 'jsdom',
transformMode: {
web: [/\.jsx?$/],
},
setupFiles: './tests/setupVitest.js',
threads: false,
isolate: false,
},
resolve: {
mainFields: ['module'],

25
packages/lucide-react-native/package.json
View File

@@ -12,7 +12,7 @@
},
"keywords": [
"Lucide",
"Angular",
"React Native",
"Feather",
"Icons",
"Icon",
@@ -34,11 +34,10 @@
"dist"
],
"scripts": {
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundles && pnpm build:types",
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundles",
"copy:license": "cp ../../LICENSE ./LICENSE",
"clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
"build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey --iconFileExtension=.ts --exportFileName=index.ts --withAliases --aliasesFileExtension=.ts",
"build:types": "node ./scripts/buildTypes.mjs",
"build:bundles": "rollup -c ./rollup.config.mjs",
"test": "vitest run",
"version": "pnpm version --git-tag-version=false"
@@ -46,23 +45,23 @@
"devDependencies": {
"@lucide/rollup-plugins": "workspace:*",
"@lucide/build-icons": "workspace:*",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/jest-dom": "^6.1.6",
"@testing-library/react": "^14.1.2",
"@types/prop-types": "^15.7.5",
"@types/react": "^18.0.21",
"@vitejs/plugin-react": "^2.1.0",
"prop-types": "^15.7.2",
"@vitejs/plugin-react": "^4.2.1",
"jest-serializer-html": "^7.1.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-native": "^0.69.0",
"react-native-svg": "^14.0.0",
"rollup": "^3.5.1",
"react-native": "^0.73.1",
"react-native-svg": "^14.1.0",
"rollup": "^4.9.2",
"rollup-plugin-dts": "^6.1.0",
"typescript": "^4.8.4",
"vite": "^4.4.12",
"vitest": "^0.32.2"
"vite": "5.0.10",
"vitest": "^1.1.1"
},
"peerDependencies": {
"prop-types": "^15.7.2",
"react": "^16.5.1 || ^17.0.0 || ^18.0.0",
"react-native": "*",
"react-native-svg": "^12.0.0 || ^13.0.0 || ^14.0.0"

15
packages/lucide-react-native/rollup.config.mjs
View File

@@ -1,4 +1,5 @@
import plugins from '@lucide/rollup-plugins';
import dts from "rollup-plugin-dts";
import pkg from './package.json' assert { type: 'json' };
const packageName = 'LucideReact';
@@ -25,7 +26,7 @@ const configs = bundles
inputs.map(input => ({
input,
plugins: plugins(pkg, minify),
external: ['react', 'prop-types', 'react-native-svg'],
external: ['react', 'react-native-svg'],
output: {
name: packageName,
...(preserveModules
@@ -42,11 +43,19 @@ const configs = bundles
globals: {
react: 'react',
'react-native-svg': 'react-native-svg',
'prop-types': 'PropTypes',
},
},
})),
)
.flat();
export default configs;
export default [
{
input: inputs[0],
output: [{
file: `dist/${outputFileName}.d.ts`, format: "es"
}],
plugins: [dts()],
},
...configs
];

92
packages/lucide-react-native/scripts/buildTypes.mjs
View File

@@ -1,92 +0,0 @@
import path from 'path';
// eslint-disable-next-line import/no-extraneous-dependencies
import { getAliases } from '@lucide/build-icons';
import {
readSvgDirectory,
resetFile,
toPascalCase,
writeFile,
getCurrentDirPath,
} from '../../../scripts/helpers.mjs';
const currentDir = getCurrentDirPath(import.meta.url);
const srcDirectory = path.join(currentDir, '../dist');
const writeDeclarationFile = (typesFile, directory, content) => {
resetFile(typesFile, directory);
writeFile(content, typesFile, directory);
};
const ICONS_DIR = path.resolve(currentDir, '../../../icons');
const TYPES_FILE = 'lucide-react-native.d.ts';
let declarationFileContent = `\
/// <reference types="react" />
import { ReactSVG, FC, SVGProps } from 'react'
declare module 'lucide-react-native'
// Create interface extending SVGProps
export interface LucideProps extends Partial<SVGProps<SVGSVGElement>> {
size?: string | number
absoluteStrokeWidth?: boolean
}
export type LucideIcon = (props: LucideProps) => JSX.Element;
export type IconNode = [elementName: keyof ReactSVG, attrs: Record<string, string>][]
export declare const createLucideIcon: (iconName: string, iconNode: IconNode) => LucideIcon;
export type Icon = FC<LucideProps>;
// Generated icon
`;
const svgFiles = readSvgDirectory(ICONS_DIR);
svgFiles.forEach((svgFile) => {
const iconName = path.basename(svgFile, '.svg');
const componentName = toPascalCase(iconName);
declarationFileContent += `export declare const ${componentName}: LucideIcon;\n`;
});
const aliases = await getAliases(ICONS_DIR);
declarationFileContent += `\n
// Generated icon aliases
`;
let aliasesCount = 0;
svgFiles.forEach((svgFile) => {
const iconName = path.basename(svgFile, '.svg');
const componentName = toPascalCase(iconName);
const iconAliases = aliases[iconName]?.aliases;
declarationFileContent += `// ${componentName} aliases\n`;
declarationFileContent += `export declare const ${componentName}Icon: LucideIcon;\n`;
declarationFileContent += `export declare const Lucide${componentName}: LucideIcon;\n`;
aliasesCount += 1;
if (iconAliases != null && Array.isArray(iconAliases)) {
iconAliases.forEach((alias) => {
const componentNameAlias = toPascalCase(alias);
declarationFileContent += `export declare const ${componentNameAlias}: LucideIcon;\n`;
aliasesCount += 1;
});
}
declarationFileContent += '\n';
});
writeDeclarationFile(TYPES_FILE, srcDirectory, declarationFileContent);
console.log(
`Generated ${TYPES_FILE} file with`,
svgFiles.length,
'icons and with',
aliasesCount,
'aliases',
);

19
packages/lucide-react-native/src/createLucideIcon.ts
View File

@@ -1,10 +1,9 @@
import { forwardRef, createElement, ReactSVG, ReactNode, FunctionComponent } from 'react';
import PropTypes from 'prop-types';
import { forwardRef, createElement, ReactSVG, FunctionComponent, ForwardRefExoticComponent } from 'react';
import * as NativeSvg from 'react-native-svg';
import defaultAttributes, { childDefaultAttributes } from './defaultAttributes';
import type { SvgProps } from 'react-native-svg';
type IconNode = [elementName: keyof ReactSVG, attrs: Record<string, string>][]
type IconNode = [elementName: keyof ReactSVG, attrs: Record<string, string>][]
export interface LucideProps extends SvgProps {
size?: string | number
@@ -12,7 +11,9 @@ export interface LucideProps extends SvgProps {
'data-testid'?: string
}
const createLucideIcon = (iconName: string, iconNode: IconNode) => {
export type LucideIcon = ForwardRefExoticComponent<LucideProps>;
const createLucideIcon = (iconName: string, iconNode: IconNode): LucideIcon => {
const Component = forwardRef(
({ color = 'currentColor', size = 24, strokeWidth = 2, absoluteStrokeWidth, children, 'data-testid': dataTestId, ...rest }: LucideProps, ref) => {
const customAttrs = {
@@ -37,8 +38,8 @@ const createLucideIcon = (iconName: string, iconNode: IconNode) => {
tag.slice(1)) as keyof typeof NativeSvg;
// duplicating the attributes here because generating the OTA update bundles don't inherit the SVG properties from parent (codepush, expo-updates)
return createElement(
NativeSvg[upperCasedTag] as FunctionComponent<Record<string, string>>,
{ ...childDefaultAttributes, ...customAttrs, ...attrs },
NativeSvg[upperCasedTag] as FunctionComponent<LucideProps>,
{ ...childDefaultAttributes, ...customAttrs, ...attrs } as LucideProps,
);
}),
...(
@@ -49,12 +50,6 @@ const createLucideIcon = (iconName: string, iconNode: IconNode) => {
}
);
Component.propTypes = {
color: PropTypes.string,
size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
strokeWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
};
Component.displayName = `${iconName}`;
return Component;

521
packages/lucide-react-native/tests/__snapshots__/lucide-react-native.spec.tsx.snap
View File

@@ -1,13 +1,522 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Using lucide icon components > should adjust the size, stroke color and stroke width 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" data-testid=\\"grid-icon\\"><rect fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M3 9h18\\"></path><path fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M3 15h18\\"></path><path fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M9 3v18\\"></path><path fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M15 3v18\\"></path></svg>"`;
exports[`Using lucide icon components > should adjust the size, stroke color and stroke width 1`] = `
<svg xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
viewbox="0 0 24 24"
fill="none"
stroke="red"
stroke-width="4"
stroke-linecap="round"
stroke-linejoin="round"
data-testid="grid-icon"
>
<rect fill="none"
stroke="red"
stroke-width="4"
stroke-linecap="round"
stroke-linejoin="round"
width="18"
height="18"
x="3"
y="3"
rx="2"
>
</rect>
<path fill="none"
stroke="red"
stroke-width="4"
stroke-linecap="round"
stroke-linejoin="round"
d="M3 9h18"
>
</path>
<path fill="none"
stroke="red"
stroke-width="4"
stroke-linecap="round"
stroke-linejoin="round"
d="M3 15h18"
>
</path>
<path fill="none"
stroke="red"
stroke-width="4"
stroke-linecap="round"
stroke-linejoin="round"
d="M9 3v18"
>
</path>
<path fill="none"
stroke="red"
stroke-width="4"
stroke-linecap="round"
stroke-linejoin="round"
d="M15 3v18"
>
</path>
</svg>
`;
exports[`Using lucide icon components > should duplicate properties to children components 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"red\\" stroke=\\"white\\" stroke-width=\\"10\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" data-testid=\\"multiple-children\\"><rect fill=\\"red\\" stroke=\\"white\\" stroke-width=\\"10\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path fill=\\"red\\" stroke=\\"white\\" stroke-width=\\"10\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M3 9h18\\"></path><path fill=\\"red\\" stroke=\\"white\\" stroke-width=\\"10\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M3 15h18\\"></path><path fill=\\"red\\" stroke=\\"white\\" stroke-width=\\"10\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M9 3v18\\"></path><path fill=\\"red\\" stroke=\\"white\\" stroke-width=\\"10\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M15 3v18\\"></path></svg>"`;
exports[`Using lucide icon components > should duplicate properties to children components 1`] = `
<svg xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewbox="0 0 24 24"
fill="red"
stroke="white"
stroke-width="10"
stroke-linecap="round"
stroke-linejoin="round"
data-testid="multiple-children"
>
<rect fill="red"
stroke="white"
stroke-width="10"
stroke-linecap="round"
stroke-linejoin="round"
width="18"
height="18"
x="3"
y="3"
rx="2"
>
</rect>
<path fill="red"
stroke="white"
stroke-width="10"
stroke-linecap="round"
stroke-linejoin="round"
d="M3 9h18"
>
</path>
<path fill="red"
stroke="white"
stroke-width="10"
stroke-linecap="round"
stroke-linejoin="round"
d="M3 15h18"
>
</path>
<path fill="red"
stroke="white"
stroke-width="10"
stroke-linecap="round"
stroke-linejoin="round"
d="M9 3v18"
>
</path>
<path fill="red"
stroke="white"
stroke-width="10"
stroke-linecap="round"
stroke-linejoin="round"
d="M15 3v18"
>
</path>
</svg>
`;
exports[`Using lucide icon components > should not scale the strokeWidth when absoluteStrokeWidth is set 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" data-testid=\\"grid-icon\\"><rect fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M3 9h18\\"></path><path fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M3 15h18\\"></path><path fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M9 3v18\\"></path><path fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M15 3v18\\"></path></svg>"`;
exports[`Using lucide icon components > should not scale the strokeWidth when absoluteStrokeWidth is set 1`] = `
<svg xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
viewbox="0 0 24 24"
fill="none"
stroke="red"
stroke-width="1"
stroke-linecap="round"
stroke-linejoin="round"
data-testid="grid-icon"
>
<rect fill="none"
stroke="red"
stroke-width="1"
stroke-linecap="round"
stroke-linejoin="round"
width="18"
height="18"
x="3"
y="3"
rx="2"
>
</rect>
<path fill="none"
stroke="red"
stroke-width="1"
stroke-linecap="round"
stroke-linejoin="round"
d="M3 9h18"
>
</path>
<path fill="none"
stroke="red"
stroke-width="1"
stroke-linecap="round"
stroke-linejoin="round"
d="M3 15h18"
>
</path>
<path fill="none"
stroke="red"
stroke-width="1"
stroke-linecap="round"
stroke-linejoin="round"
d="M9 3v18"
>
</path>
<path fill="none"
stroke="red"
stroke-width="1"
stroke-linecap="round"
stroke-linejoin="round"
d="M15 3v18"
>
</path>
</svg>
`;
exports[`Using lucide icon components > should render an component 1`] = `"<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 fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M3 9h18\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M3 15h18\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M9 3v18\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M15 3v18\\"></path></svg>"`;
exports[`Using lucide icon components > should render an component 1`] = `
<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 fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
width="18"
height="18"
x="3"
y="3"
rx="2"
>
</rect>
<path fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
d="M3 9h18"
>
</path>
<path fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
d="M3 15h18"
>
</path>
<path fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
d="M9 3v18"
>
</path>
<path fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
d="M15 3v18"
>
</path>
</svg>
`;
exports[`Using lucide icon components > should work with a single child component 1`] = `"<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\\" data-testid=\\"single-child\\"><rect fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M3 9h18\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M3 15h18\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M9 3v18\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M15 3v18\\"></path><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\\" data-testid=\\"child\\"><rect fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M3 9h18\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M3 15h18\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M9 3v18\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M15 3v18\\"></path></svg></svg>"`;
exports[`Using lucide icon components > should work with a single child component 1`] = `
<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"
data-testid="single-child"
>
<rect fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
width="18"
height="18"
x="3"
y="3"
rx="2"
>
</rect>
<path fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
d="M3 9h18"
>
</path>
<path fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
d="M3 15h18"
>
</path>
<path fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
d="M9 3v18"
>
</path>
<path fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
d="M15 3v18"
>
</path>
<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"
data-testid="child"
>
<rect fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
width="18"
height="18"
x="3"
y="3"
rx="2"
>
</rect>
<path fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
d="M3 9h18"
>
</path>
<path fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
d="M3 15h18"
>
</path>
<path fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
d="M9 3v18"
>
</path>
<path fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
d="M15 3v18"
>
</path>
</svg>
</svg>
`;
exports[`Using lucide icon components > should work with several children components 1`] = `"<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\\" data-testid=\\"multiple-children\\"><rect fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M3 9h18\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M3 15h18\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M9 3v18\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M15 3v18\\"></path><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\\" data-testid=\\"child1\\"><rect fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M3 9h18\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M3 15h18\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M9 3v18\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M15 3v18\\"></path></svg><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\\" data-testid=\\"child2\\"><rect fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M3 9h18\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M3 15h18\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M9 3v18\\"></path><path fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" d=\\"M15 3v18\\"></path></svg></svg>"`;
exports[`Using lucide icon components > should work with several children components 1`] = `
<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"
data-testid="multiple-children"
>
<rect fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
width="18"
height="18"
x="3"
y="3"
rx="2"
>
</rect>
<path fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
d="M3 9h18"
>
</path>
<path fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
d="M3 15h18"
>
</path>
<path fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
d="M9 3v18"
>
</path>
<path fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
d="M15 3v18"
>
</path>
<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"
data-testid="child1"
>
<rect fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
width="18"
height="18"
x="3"
y="3"
rx="2"
>
</rect>
<path fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
d="M3 9h18"
>
</path>
<path fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
d="M3 15h18"
>
</path>
<path fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
d="M9 3v18"
>
</path>
<path fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
d="M15 3v18"
>
</path>
</svg>
<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"
data-testid="child2"
>
<rect fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
width="18"
height="18"
x="3"
y="3"
rx="2"
>
</rect>
<path fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
d="M3 9h18"
>
</path>
<path fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
d="M3 15h18"
>
</path>
<path fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
d="M9 3v18"
>
</path>
<path fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
d="M15 3v18"
>
</path>
</svg>
</svg>
`;

10
packages/lucide-react-native/tests/setupVitest.js
View File

@@ -1 +1,11 @@
import '@testing-library/jest-dom';
import { expect, afterEach } from 'vitest';
import { cleanup } from '@testing-library/react';
import '@testing-library/jest-dom/vitest';
import htmlSerializer from 'jest-serializer-html'
expect.addSnapshotSerializer(htmlSerializer)
afterEach(() => {
cleanup();
});

5
packages/lucide-react-native/vitest.config.ts → packages/lucide-react-native/vitest.config.mts
View File

@@ -8,12 +8,7 @@ export default defineConfig({
test: {
globals: true,
environment: 'jsdom',
transformMode: {
web: [/\.jsx?$/],
},
setupFiles: './tests/setupVitest.js',
// threads: false,
// isolate: false,
mockReset: true,
},
});

22
packages/lucide-react/package.json
View File

@@ -12,7 +12,7 @@
},
"keywords": [
"Lucide",
"Angular",
"React",
"Feather",
"Icons",
"Icon",
@@ -51,18 +51,18 @@
"devDependencies": {
"@lucide/build-icons": "workspace:*",
"@lucide/rollup-plugins": "workspace:*",
"@testing-library/jest-dom": "^6.1.4",
"@testing-library/react": "^11.2.7",
"@types/prop-types": "^15.7.10",
"@testing-library/jest-dom": "^6.1.6",
"@testing-library/react": "^14.1.2",
"@types/react": "^18.2.37",
"@vitejs/plugin-react": "^2.2.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"rollup": "^3.29.4",
"rollup-plugin-dts": "^5.3.1",
"@vitejs/plugin-react": "^4.2.1",
"jest-serializer-html": "^7.1.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"rollup": "^4.9.2",
"rollup-plugin-dts": "^6.1.0",
"typescript": "^4.9.5",
"vite": "^4.4.12",
"vitest": "^0.32.4"
"vite": "5.0.10",
"vitest": "^1.1.1"
},
"peerDependencies": {
"react": "^16.5.1 || ^17.0.0 || ^18.0.0"

127
packages/lucide-react/tests/__snapshots__/lucide-react.spec.tsx.snap
View File

@@ -1,9 +1,128 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Using lucide icon components > should adjust the size, stroke color and stroke width 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid3x3 \\" data-testid=\\"grid-icon\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path d=\\"M3 9h18\\"></path><path d=\\"M3 15h18\\"></path><path d=\\"M9 3v18\\"></path><path d=\\"M15 3v18\\"></path></svg>"`;
exports[`Using lucide icon components > should adjust the size, stroke color and stroke width 1`] = `
<svg xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
viewbox="0 0 24 24"
fill="none"
stroke="red"
stroke-width="4"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-grid3x3 "
data-testid="grid-icon"
>
<rect width="18"
height="18"
x="3"
y="3"
rx="2"
>
</rect>
<path d="M3 9h18">
</path>
<path d="M3 15h18">
</path>
<path d="M9 3v18">
</path>
<path d="M15 3v18">
</path>
</svg>
`;
exports[`Using lucide icon components > should not scale the strokeWidth when absoluteStrokeWidth is set 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid3x3 \\" data-testid=\\"grid-icon\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path d=\\"M3 9h18\\"></path><path d=\\"M3 15h18\\"></path><path d=\\"M9 3v18\\"></path><path d=\\"M15 3v18\\"></path></svg>"`;
exports[`Using lucide icon components > should not scale the strokeWidth when absoluteStrokeWidth is set 1`] = `
<svg xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
viewbox="0 0 24 24"
fill="none"
stroke="red"
stroke-width="1"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-grid3x3 "
data-testid="grid-icon"
>
<rect width="18"
height="18"
x="3"
y="3"
rx="2"
>
</rect>
<path d="M3 9h18">
</path>
<path d="M3 15h18">
</path>
<path d="M9 3v18">
</path>
<path d="M15 3v18">
</path>
</svg>
`;
exports[`Using lucide icon components > should render an component 1`] = `"<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\\" class=\\"lucide lucide-grid3x3 \\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path d=\\"M3 9h18\\"></path><path d=\\"M3 15h18\\"></path><path d=\\"M9 3v18\\"></path><path d=\\"M15 3v18\\"></path></svg>"`;
exports[`Using lucide icon components > should render an component 1`] = `
<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"
class="lucide lucide-grid3x3 "
>
<rect width="18"
height="18"
x="3"
y="3"
rx="2"
>
</rect>
<path d="M3 9h18">
</path>
<path d="M3 15h18">
</path>
<path d="M9 3v18">
</path>
<path d="M15 3v18">
</path>
</svg>
`;
exports[`Using lucide icon components > should render icons dynamically by using the dynamicIconImports module 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-smile \\" aria-label=\\"smile\\"><circle cx=\\"12\\" cy=\\"12\\" r=\\"10\\"></circle><path d=\\"M8 14s1.5 2 4 2 4-2 4-2\\"></path><line x1=\\"9\\" x2=\\"9.01\\" y1=\\"9\\" y2=\\"9\\"></line><line x1=\\"15\\" x2=\\"15.01\\" y1=\\"9\\" y2=\\"9\\"></line></svg>"`;
exports[`Using lucide icon components > should render icons dynamically by using the dynamicIconImports module 1`] = `
<svg xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
viewbox="0 0 24 24"
fill="none"
stroke="red"
stroke-width="1"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-smile "
aria-label="smile"
>
<circle cx="12"
cy="12"
r="10"
>
</circle>
<path d="M8 14s1.5 2 4 2 4-2 4-2">
</path>
<line x1="9"
x2="9.01"
y1="9"
y2="9"
>
</line>
<line x1="15"
x2="15.01"
y1="9"
y2="9"
>
</line>
</svg>
`;

11
packages/lucide-react/tests/setupVitest.js
View File

@@ -1 +1,10 @@
import '@testing-library/jest-dom';
import { expect, afterEach } from 'vitest';
import { cleanup } from '@testing-library/react';
import '@testing-library/jest-dom/vitest';
import htmlSerializer from 'jest-serializer-html'
expect.addSnapshotSerializer(htmlSerializer)
afterEach(() => {
cleanup();
});

8
packages/lucide-react/vitest.config.ts → packages/lucide-react/vitest.config.mts
View File

@@ -6,14 +6,6 @@ export default defineConfig({
test: {
globals: true,
environment: 'jsdom',
transformMode: {
web: [/\.jsx?$/],
},
setupFiles: './tests/setupVitest.js',
threads: false,
isolate: false,
},
resolve: {
conditions: ['development', 'browser'],
},
});

15
packages/lucide-solid/package.json
View File

@@ -12,7 +12,8 @@
},
"keywords": [
"Lucide",
"Angular",
"Solid",
"SolidJS",
"Feather",
"Icons",
"Icon",
@@ -54,18 +55,18 @@
"devDependencies": {
"@atomico/rollup-plugin-sizes": "^1.1.4",
"@lucide/build-icons": "workspace:*",
"@solidjs/testing-library": "^0.8.4",
"@solidjs/testing-library": "^0.8.5",
"@testing-library/jest-dom": "^6.1.4",
"babel-preset-solid": "^1.5.4",
"jest-serializer-html": "^7.1.0",
"jsdom": "^23.0.1",
"rollup": "^3.5.1",
"rollup": "^4.9.2",
"rollup-plugin-license": "^3.0.1",
"rollup-preset-solid": "^2.0.1",
"solid-js": "^1.7.7",
"solid-js": "^1.8.7",
"typescript": "^4.9.4",
"vite": "^4.4.12",
"vite": "5.0.10",
"vite-plugin-solid": "^2.8.0",
"vitest": "^1.0.4"
"vitest": "0.34.2"
},
"peerDependencies": {
"solid-js": "^1.4.7"

119
packages/lucide-solid/tests/__snapshots__/lucide-solid.spec.tsx.snap
View File

@@ -1,7 +1,120 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Using lucide icon components > should adjust the size, stroke color and stroke width 1`] = `"<svg data-testid="grid-icon" width="48" height="48" stroke="red" stroke-width="4" class="lucide lucide-grid3x3 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" key="afitv7"></rect><path d="M3 9h18" key="1pudct"></path><path d="M3 15h18" key="5xshup"></path><path d="M9 3v18" key="fh3hqa"></path><path d="M15 3v18" key="14nvp0"></path></svg>"`;
exports[`Using lucide icon components > should adjust the size, stroke color and stroke width 1`] = `
<svg data-testid="grid-icon"
width="48"
height="48"
stroke="red"
stroke-width="4"
class="lucide lucide-grid3x3 "
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect width="18"
height="18"
x="3"
y="3"
rx="2"
key="afitv7"
>
</rect>
<path d="M3 9h18"
key="1pudct"
>
</path>
<path d="M3 15h18"
key="5xshup"
>
</path>
<path d="M9 3v18"
key="fh3hqa"
>
</path>
<path d="M15 3v18"
key="14nvp0"
>
</path>
</svg>
`;
exports[`Using lucide icon components > should not scale the strokeWidth when absoluteStrokeWidth is set 1`] = `"<svg data-testid="grid-icon" width="48" height="48" stroke="red" stroke-width="1" class="lucide lucide-grid3x3 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" key="afitv7"></rect><path d="M3 9h18" key="1pudct"></path><path d="M3 15h18" key="5xshup"></path><path d="M9 3v18" key="fh3hqa"></path><path d="M15 3v18" key="14nvp0"></path></svg>"`;
exports[`Using lucide icon components > should not scale the strokeWidth when absoluteStrokeWidth is set 1`] = `
<svg data-testid="grid-icon"
width="48"
height="48"
stroke="red"
stroke-width="1"
class="lucide lucide-grid3x3 "
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect width="18"
height="18"
x="3"
y="3"
rx="2"
key="afitv7"
>
</rect>
<path d="M3 9h18"
key="1pudct"
>
</path>
<path d="M3 15h18"
key="5xshup"
>
</path>
<path d="M9 3v18"
key="fh3hqa"
>
</path>
<path d="M15 3v18"
key="14nvp0"
>
</path>
</svg>
`;
exports[`Using lucide icon components > should render an component 1`] = `"<svg width="24" height="24" stroke="currentColor" stroke-width="2" class="lucide lucide-grid3x3 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" key="afitv7"></rect><path d="M3 9h18" key="1pudct"></path><path d="M3 15h18" key="5xshup"></path><path d="M9 3v18" key="fh3hqa"></path><path d="M15 3v18" key="14nvp0"></path></svg>"`;
exports[`Using lucide icon components > should render a component 1`] = `
<svg width="24"
height="24"
stroke="currentColor"
stroke-width="2"
class="lucide lucide-grid3x3 "
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect width="18"
height="18"
x="3"
y="3"
rx="2"
key="afitv7"
>
</rect>
<path d="M3 9h18"
key="1pudct"
>
</path>
<path d="M3 15h18"
key="5xshup"
>
</path>
<path d="M9 3v18"
key="fh3hqa"
>
</path>
<path d="M15 3v18"
key="14nvp0"
>
</path>
</svg>
`;

10
packages/lucide-solid/tests/lucide-solid.spec.tsx
View File

@@ -1,13 +1,12 @@
import { describe, it, expect } from 'vitest';
import { cleanup, render } from '@solidjs/testing-library'
import { render, cleanup } from '@solidjs/testing-library'
import { Edit2, Grid, Pen, Droplet } from '../src/lucide-solid'
describe('Using lucide icon components', () => {
it('should render an component', () => {
it('should render a component', () => {
const { container } = render(() => <Grid /> );
expect( container.innerHTML ).toMatchSnapshot();
cleanup()
expect(container.innerHTML).toMatchSnapshot();
});
it('should adjust the size, stroke color and stroke width', async () => {
@@ -27,7 +26,6 @@ describe('Using lucide icon components', () => {
expect(attributes.height.value).toBe('48');
expect(attributes['stroke-width'].value).toBe('4');
expect( container.innerHTML ).toMatchSnapshot();
cleanup()
});
it('should render the alias icon', () => {
@@ -55,7 +53,6 @@ describe('Using lucide icon components', () => {
);
expect(PenIconRenderedHTML).toBe(Edit2Container.innerHTML)
cleanup()
});
@@ -77,7 +74,6 @@ describe('Using lucide icon components', () => {
expect(attributes['stroke-width'].value).toBe('1');
expect( container.innerHTML ).toMatchSnapshot();
cleanup()
});
it('should add all classes to the element', () => {

11
packages/lucide-solid/tests/setupVitest.js
View File

@@ -1 +1,10 @@
import '@testing-library/jest-dom';
import { expect, afterEach } from 'vitest';
import { cleanup } from '@solidjs/testing-library';
import '@testing-library/jest-dom/vitest';
import htmlSerializer from 'jest-serializer-html'
expect.addSnapshotSerializer(htmlSerializer)
afterEach(() => {
cleanup();
});

8
packages/lucide-solid/vitest.config.ts → packages/lucide-solid/vitest.config.mts
View File

@@ -2,16 +2,12 @@ import { defineConfig } from 'vitest/config'
import solidPlugin from 'vite-plugin-solid';
export default defineConfig({
// TODO: Remove this when Solid testing library has support for Vitest 1.0, see: https://github.com/solidjs/solid-testing-library/issues/52
// @ts-ignore
plugins: [solidPlugin()],
test: {
globals: true,
environment: 'jsdom',
transformMode: {
web: [/\.[jt]sx?$/]
},
setupFiles: './tests/setupVitest.js',
},
resolve: {
conditions: ['development', 'browser'],
},
});

4
packages/lucide-static/package.json
View File

@@ -11,7 +11,9 @@
},
"keywords": [
"Lucide",
"Angular",
"Static",
"Sprite",
"NodeJS",
"Feather",
"Icons",
"Icon",

7
packages/lucide-svelte/package.json
View File

@@ -12,7 +12,7 @@
},
"keywords": [
"Lucide",
"Angular",
"Svelte",
"Feather",
"Icons",
"Icon",
@@ -61,13 +61,14 @@
"@testing-library/jest-dom": "^6.1.4",
"@testing-library/svelte": "^4.0.2",
"@tsconfig/svelte": "^5.0.0",
"jest-serializer-html": "^7.1.0",
"jsdom": "^20.0.3",
"svelte": "^4.0.1",
"svelte-check": "^3.4.4",
"svelte-preprocess": "^5.0.4",
"typescript": "^5.1.6",
"vite": "^4.4.12",
"vitest": "^0.32.2"
"vite": "5.0.10",
"vitest": "^1.1.1"
},
"peerDependencies": {
"svelte": ">=3 <5"

37
packages/lucide-svelte/tests/__snapshots__/lucide-svelte.spec.ts.snap
View File

@@ -86,7 +86,42 @@ exports[`Using lucide icon components > should adjust the size, stroke color and
</body>
`;
exports[`Using lucide icon components > should not scale the strokeWidth when absoluteStrokeWidth is set 1`] = `"<div><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" data-testid=\\"smile-icon\\" class=\\"lucide-icon lucide lucide-smile \\"><circle cx=\\"12\\" cy=\\"12\\" r=\\"10\\"></circle><path d=\\"M8 14s1.5 2 4 2 4-2 4-2\\"></path><line x1=\\"9\\" x2=\\"9.01\\" y1=\\"9\\" y2=\\"9\\"></line><line x1=\\"15\\" x2=\\"15.01\\" y1=\\"9\\" y2=\\"9\\"></line></svg></div>"`;
exports[`Using lucide icon components > should not scale the strokeWidth when absoluteStrokeWidth is set 1`] = `
<div>
<svg xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
viewbox="0 0 24 24"
fill="none"
stroke="red"
stroke-width="1"
stroke-linecap="round"
stroke-linejoin="round"
data-testid="smile-icon"
class="lucide-icon lucide lucide-smile "
>
<circle cx="12"
cy="12"
r="10"
>
</circle>
<path d="M8 14s1.5 2 4 2 4-2 4-2">
</path>
<line x1="9"
x2="9.01"
y1="9"
y2="9"
>
</line>
<line x1="15"
x2="15.01"
y1="9"
y2="9"
>
</line>
</svg>
</div>
`;
exports[`Using lucide icon components > should render an component 1`] = `
<body>

6
packages/lucide-svelte/tests/setupVitest.ts
View File

@@ -1 +1,5 @@
import '@testing-library/jest-dom';
import { expect } from 'vitest';
import '@testing-library/jest-dom/vitest';
import htmlSerializer from 'jest-serializer-html'
expect.addSnapshotSerializer(htmlSerializer)

26
packages/lucide-vue-next/package.json
View File

@@ -13,7 +13,7 @@
},
"keywords": [
"Lucide",
"Angular",
"Vue",
"Feather",
"Icons",
"Icon",
@@ -35,28 +35,26 @@
"nuxt.js"
],
"scripts": {
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundles && pnpm build:types",
"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",
"build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey --withAliases --aliasesFileExtension=.ts --iconFileExtension=.ts --exportFileName=index.ts",
"build:types": "node ./scripts/buildTypes.mjs",
"build:bundles": "rollup -c ./rollup.config.mjs",
"test": "vitest run",
"version": "pnpm version --git-tag-version=false"
},
"devDependencies": {
"@lucide/rollup-plugins": "workspace:*",
"@lucide/build-icons": "workspace:*",
"@testing-library/jest-dom": "^6.1.4",
"@testing-library/vue": "^6.6.1",
"@vue/compiler-sfc": "3.2.45",
"@vue/test-utils": "2.2.4",
"@vitejs/plugin-vue": "^3.2.0",
"rollup": "^3.5.1",
"vite": "^4.4.12",
"vitest": "^0.32.2",
"vue": "3.2.45",
"jsdom": "^20.0.3"
"@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",
"vite": "5.0.10",
"vitest": "^1.1.1",
"vue": "^3.0.1"
},
"peerDependencies": {
"vue": ">=3.0.1"

19
packages/lucide-vue-next/rollup.config.mjs
View File

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

89
packages/lucide-vue-next/scripts/buildTypes.mjs
View File

@@ -1,89 +0,0 @@
import path from 'path';
// eslint-disable-next-line import/no-extraneous-dependencies
import { getAliases } from '@lucide/build-icons';
import {
readSvgDirectory,
resetFile,
writeFile,
toPascalCase,
getCurrentDirPath,
} from '../../../scripts/helpers.mjs';
const currentDir = getCurrentDirPath(import.meta.url);
const targetDirectory = path.join(currentDir, '../dist');
const writeDeclarationFile = (typesFile, directory, content) => {
resetFile(typesFile, directory);
writeFile(content, typesFile, directory);
};
const getComponentImport = (componentName) => `export declare const ${componentName}: Icon;\n`;
const ICONS_DIR = path.resolve(currentDir, '../../../icons');
const TYPES_FILE = 'lucide-vue-next.d.ts';
// Generates header of d.ts file include some types and functions
let declarationFileContent = `\
import { SVGAttributes, DefineComponent } from 'vue';
declare module 'lucide-vue-next'
// Create interface extending SVGAttributes
export interface SVGProps extends Partial<SVGAttributes> {
size?: 24 | number
strokeWidth?: number | string
absoluteStrokeWidth?: boolean
}
export type Icon = DefineComponent<SVGProps>
// Generated icons
`;
const svgFiles = readSvgDirectory(ICONS_DIR);
svgFiles.forEach((svgFile) => {
const nameSvg = path.basename(svgFile, '.svg');
const componentName = toPascalCase(nameSvg);
declarationFileContent += getComponentImport(componentName);
});
const aliases = await getAliases(ICONS_DIR);
declarationFileContent += `\n
// Generated icon aliases
`;
let aliasesCount = 0;
svgFiles.forEach((svgFile) => {
const iconName = path.basename(svgFile, '.svg');
const componentName = toPascalCase(iconName);
const iconAliases = aliases[iconName]?.aliases;
declarationFileContent += `// ${componentName} aliases\n`;
declarationFileContent += getComponentImport(`${componentName}Icon`);
declarationFileContent += getComponentImport(`Lucide${componentName}`);
aliasesCount += 1;
if (iconAliases != null && Array.isArray(iconAliases)) {
iconAliases.forEach((alias) => {
const componentNameAlias = toPascalCase(alias);
declarationFileContent += getComponentImport(componentNameAlias);
aliasesCount += 1;
});
}
declarationFileContent += '\n';
});
writeDeclarationFile(TYPES_FILE, targetDirectory, declarationFileContent);
console.log(
`Generated ${TYPES_FILE} file with`,
svgFiles.length,
'icons and with',
aliasesCount,
'aliases',
);

8
packages/lucide-vue-next/src/createLucideIcon.ts
View File

@@ -1,5 +1,5 @@
import { h } from 'vue';
import type { SVGAttributes, FunctionalComponent } from 'vue';
import type { SVGAttributes, FunctionalComponent, DefineComponent } from 'vue';
import defaultAttributes from './defaultAttributes';
// Create interface extending SVGAttributes
@@ -10,8 +10,8 @@ export interface SVGProps extends Partial<SVGAttributes> {
}
type IconNode = [elementName: string, attrs: Record<string, string>][]
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
@@ -22,7 +22,7 @@ type IconNode = [elementName: string, attrs: Record<string, string>][]
*/
export const toKebabCase = (string: string) => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
const createLucideIcon = (iconName: string, iconNode: IconNode): FunctionalComponent<SVGProps> => (
const createLucideIcon = (iconName: string, iconNode: IconNode): Icon => (
{ size, strokeWidth = 2, absoluteStrokeWidth, color, class: classes, ...props }, // props
{ attrs, slots } // context
) => {

2
packages/lucide-vue-next/tests/lucide-vue-next.spec.ts
View File

@@ -113,8 +113,6 @@ describe('Using lucide icon components', () => {
}
})
console.log(PenIconRenderedHTML, Edit2Container.innerHTML)
expect(PenIconRenderedHTML).toBe(Edit2Container.innerHTML)
})

4
packages/lucide-vue-next/tsconfig.json
View File

@@ -12,7 +12,5 @@
"lib": ["ESNext", "DOM"],
"skipLibCheck": true,
"noEmit": true,
"types": ["vitest/globals"]
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
}
}

0
packages/lucide-vue-next/vitest.config.ts → packages/lucide-vue-next/vitest.config.mts
View File

4
packages/lucide-vue/package.json
View File

@@ -13,7 +13,7 @@
},
"keywords": [
"Lucide",
"Angular",
"Vue",
"Feather",
"Icons",
"Icon",
@@ -51,7 +51,7 @@
"@vue/test-utils": "1.3.0",
"rollup": "^3.23.0",
"typescript": "^4.9.5",
"vite": "^4.4.12",
"vite": "5.0.10",
"vitest": "^0.32.2",
"vue": "2.7.14",
"vue-template-compiler": "2.7.14"

18
packages/lucide/package.json
View File

@@ -12,7 +12,7 @@
},
"keywords": [
"Lucide",
"Angular",
"HTML",
"Feather",
"Icons",
"Icon",
@@ -37,20 +37,20 @@
"copy:license": "cp ../../LICENSE ./LICENSE",
"clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.ts",
"build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mjs --iconFileExtension=.ts --withAliases --aliasNamesOnly --aliasesFileExtension=.ts --exportFileName=index.ts",
"build:types": "node ./scripts/buildTypes.mjs",
"build:bundles": "rollup -c rollup.config.mjs",
"test": "vitest run",
"version": "pnpm version --git-tag-version=false"
},
"devDependencies": {
"@lucide/rollup-plugins": "workspace:*",
"@lucide/build-icons": "workspace:*",
"@rollup/plugin-replace": "^5.0.1",
"@testing-library/jest-dom": "^5.16.5",
"rollup": "^3.5.1",
"rollup-plugin-dts": "^5.0.0",
"@lucide/rollup-plugins": "workspace:*",
"@rollup/plugin-replace": "^5.0.5",
"@testing-library/jest-dom": "^6.1.6",
"jest-serializer-html": "^7.1.0",
"rollup": "^4.9.2",
"rollup-plugin-dts": "^6.1.0",
"typescript": "^4.9.3",
"vite": "^4.4.12",
"vitest": "^0.32.2"
"vite": "5.0.10",
"vitest": "^1.1.1"
}
}

86
packages/lucide/scripts/buildTypes.mjs
View File

@@ -1,86 +0,0 @@
import path from 'path';
import {
readSvgDirectory,
appendFile,
writeFile,
toPascalCase,
getCurrentDirPath,
} from '../../../scripts/helpers.mjs';
const currentDir = getCurrentDirPath(import.meta.url);
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',
};
const TARGET_DIR = path.join(currentDir, '../dist');
const ICONS_DIR = path.resolve(currentDir, '../../../icons');
const TYPES_FILE_NAME = 'lucide.d.ts';
// Generates header of d.ts file include some types and functions
const typeDefinitions = `\
declare module 'lucide'
export interface SVGProps extends Partial<SVGElement> ${JSON.stringify(defaultAttributes, null, 2)}
export declare type IconNodeChild = readonly [string, object];
export declare type IconNode = readonly [tag: string, attrs: SVGProps, children?: IconNodeChild[]];
export declare type CustomAttrs = { [attr:string]: any }
export type Icons = { [key: string]: IconNode }
export interface CreateIconsOptions {
/**
* List of icons you want to replace
*
* For example: \`{ Menu, Circle}\`.
*
* For replace all icons in lucide library, import \`icons\` and use it.
*/
icons: Icons;
/**
* Search HTML emelemt by \`nameAttr\` property.
*
* For example if define \`<i data-lucide="circle"></i>\`, fill by \`data-lucide\`.
*
* @default 'data-lucide'
*/
nameAttr?: string;
/**
* Change defult attribute for show like color, fill, width , ...
*
* @default undefined
*/
attrs?: CustomAttrs;
}
export function createElement(icon: IconNode): SVGSVGElement;
export function createIcons(options: CreateIconsOptions): void;
export declare const icons: Icons;
// Generated icons
`;
writeFile(typeDefinitions, TYPES_FILE_NAME, TARGET_DIR);
const svgFiles = readSvgDirectory(ICONS_DIR);
svgFiles.forEach((svgFile) => {
const nameSvg = path.basename(svgFile, '.svg');
const namePascal = toPascalCase(nameSvg);
appendFile(`export declare const ${namePascal}: IconNode;\n`, TYPES_FILE_NAME, TARGET_DIR);
});
console.log(`Generated ${TYPES_FILE_NAME} file with`, svgFiles.length, 'icons');

75
packages/lucide/tests/__snapshots__/lucide.spec.js.snap
View File

@@ -1,7 +1,76 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`createIcons > should add custom attributes 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"black\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" data-lucide=\\"volume-2\\" class=\\"lucide lucide-volume-2 icon custom-class\\"><polygon points=\\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\\"></polygon><path d=\\"M15.54 8.46a5 5 0 0 1 0 7.07\\"></path><path d=\\"M19.07 4.93a10 10 0 0 1 0 14.14\\"></path></svg>"`;
exports[`createIcons > should add custom attributes 1`] = `
<svg xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewbox="0 0 24 24"
fill="black"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
data-lucide="volume-2"
class="lucide lucide-volume-2 icon custom-class"
>
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5">
</polygon>
<path d="M15.54 8.46a5 5 0 0 1 0 7.07">
</path>
<path d="M19.07 4.93a10 10 0 0 1 0 14.14">
</path>
</svg>
`;
exports[`createIcons > should read elements from DOM and replace icon with alias name 1`] = `"<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\\" data-lucide=\\"grid\\" class=\\"lucide lucide-grid\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\"></rect><path d=\\"M3 9h18\\"></path><path d=\\"M3 15h18\\"></path><path d=\\"M9 3v18\\"></path><path d=\\"M15 3v18\\"></path></svg>"`;
exports[`createIcons > should read elements from DOM and replace icon with alias name 1`] = `
<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"
data-lucide="grid"
class="lucide lucide-grid"
>
<rect width="18"
height="18"
x="3"
y="3"
rx="2"
>
</rect>
<path d="M3 9h18">
</path>
<path d="M3 15h18">
</path>
<path d="M9 3v18">
</path>
<path d="M15 3v18">
</path>
</svg>
`;
exports[`createIcons > should read elements from DOM and replace it with icons 1`] = `"<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\\" data-lucide=\\"volume-2\\" class=\\"lucide lucide-volume-2\\"><polygon points=\\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\\"></polygon><path d=\\"M15.54 8.46a5 5 0 0 1 0 7.07\\"></path><path d=\\"M19.07 4.93a10 10 0 0 1 0 14.14\\"></path></svg>"`;
exports[`createIcons > should read elements from DOM and replace it with icons 1`] = `
<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"
data-lucide="volume-2"
class="lucide lucide-volume-2"
>
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5">
</polygon>
<path d="M15.54 8.46a5 5 0 0 1 0 7.07">
</path>
<path d="M19.07 4.93a10 10 0 0 1 0 14.14">
</path>
</svg>
`;

7
packages/lucide/tests/setupVitest.js
View File

@@ -1 +1,6 @@
import '@testing-library/jest-dom';
import { expect } from 'vitest'
import '@testing-library/jest-dom/vitest';
import htmlSerializer from 'jest-serializer-html'
expect.addSnapshotSerializer(htmlSerializer)

10
packages/lucide/vitest.config.ts → packages/lucide/vitest.config.mts
View File

@@ -4,14 +4,6 @@ export default defineConfig({
test: {
globals: true,
environment: 'jsdom',
transformMode: {
web: [/\.jsx?$/],
},
setupFiles: './tests/setupVitest.js',
threads: false,
isolate: false,
},
resolve: {
conditions: ['development', 'browser'],
},
}
});

6968
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

8
tools/rollup-plugins/package.json
View File

@@ -11,10 +11,10 @@
"dependencies": {
"@atomico/rollup-plugin-sizes": "^1.1.4",
"@rollup/plugin-replace": "^5.0.5",
"esbuild": "^0.15.18",
"rollup": "^3.29.4",
"rollup-plugin-esbuild": "^4.10.3",
"esbuild": "^0.19.11",
"rollup": "^4.9.2",
"rollup-plugin-esbuild": "^6.1.0",
"rollup-plugin-license": "^3.2.0",
"rollup-plugin-visualizer": "^5.9.2"
"rollup-plugin-visualizer": "^5.12.0"
}
}