- 
- 
+ 
+ Icons + · + Guide + · + Packages + · + License + · + Showcase +
# Lucide -Community-run fork of [Feather Icons](https://github.com/feathericons/feather), open for anyone to contribute icons. - -It began after growing dissatisfaction with the [Feather Icons](https://github.com/feathericons/feather) project moderation. With over 300+ open issues and over 100+ open PRs, the Feather Icons project has been abandoned. This unfortunately means that hundreds of developers and designers wasted their time contributing to Feather Icons with no chance of PRs being accepted. - -Lucide is trying to expand the icon set as much as possible while staying faithful to the original simplistic design language. We do this as a community of devs and designers and hope that you'll join us! - -### Why choose Lucide over Feather Icons - -- More icons to work with: Lucide already has hundreds of icons more than Feather does. -- Official libraries and integrations with popular frameworks and design tools. -- Well maintained code base. -- Active community, regularly growing and improving the set. - -## Table of Contents - -- [Usage](#usage) - - [Web](#web) - - [React](#react) - - [React Native](#react-native) - - [Vue 2](#vue-2) - - [Vue 3](#vue-3) - - [Angular](#angular) - - [Preact](#preact) - - [Static (svg sprite, font, icons ..)](#static-svg-sprite-font-icons-) - - [Figma](#figma) - - [Laravel](#laravel) - - [Svelte](#svelte) - - [Solid](#solid) - - [Hyva](#hyva) - - [Eleventy](#eleventy) -- [Contributing](#contributing) -- [Community](#community) -- [License](#license) -- [Credits](#credits) -- [Sponsors](#sponsors) - -## Usage - -At its core, Lucide is a collection of [SVG](https://svgontheweb.com/#svg) files. This means that you can use Lucide icons in all the same ways you can use SVGs (e.g. `img`, `background-image`, `inline`, `object`, `embed`, `iframe`). Here's a helpful article detailing the many ways SVGs can be used on the web: [SVG on the Web – Implementation Options](https://svgontheweb.com/#implementation) - -The following are additional ways you can use Lucide. -With the Javascript library you can easily incorporate the icon you want in your webpage. - -### Web - -Implementation of the lucide icon library for web applications. - -```sh -npm install lucide -``` - -or - -```sh -yarn add lucide -``` - -For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide#lucide). - -### React - -Implementation of the lucide icon library for react applications. - -```sh -yarn add lucide-react -``` - -or - -```sh -npm install lucide-react -``` - -For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-react#lucide-react). - -### React Native - -Implementation of the lucide icon library for React Native applications. - -```sh -yarn add lucide-react-native -``` - -or - -```sh -npm install lucide-react-native -``` - -For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-react-native#lucide-react-native). - -### Vue 2 - -Implementation of the lucide icon library for vue applications. - -```sh -yarn add lucide-vue -``` - -or - -```sh -npm install lucide-vue -``` - -For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-vue#lucide-vue). - -### Vue 3 - -Implementation of the lucide icon library for vue applications. - -```sh -yarn add lucide-vue-next -``` - -or - -```sh -npm install lucide-vue-next -``` +Lucide is an open-source icon library that provides 1000+ vector (svg) files for displaying icons and symbols in digital and non-digital projects. The library aims to make it easier for designers and developers to incorporate icons into their projects by providing several official [packages](https://lucide.dev/packages) to make it easier to use these icons in your project. -For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-vue-next#lucide-vue-next). +## Packages -### Angular - -```sh -yarn add lucide-angular -``` - -or - -```sh -npm install lucide-angular -``` - -For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-angular#lucide-angular). - -### Preact - -Implementation of the lucide icon library for preact applications. - -```sh -yarn add lucide-preact -``` - -or - -```sh -npm install lucide-preact -``` - -For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-preact#lucide-preact). - -### Static (svg sprite, font, icons ..) - -Assets: -[Font Files](https://github.com/lucide-icons/lucide/releases/latest) -[SVG Files](https://github.com/lucide-icons/lucide/releases/latest) -[SVG Sprite](https://cdn.jsdelivr.net/npm/lucide-static@latest/sprite.svg) - -NPM package - -```sh -yarn add lucide-static -``` - -or - -```sh -npm install lucide-static -``` +| | Package | Version & Downloads | Links | +| --- | --- | --- | --- | +|
| `lucide` | [](https://www.npmjs.com/package/lucide)  | [Docs](https://lucide.dev/guide/packages/lucide) [Source](./packages/lucide) |
+| 
| `lucide-react` | [](https://www.npmjs.com/package/lucide-react)  | [Docs](https://lucide.dev/guide/packages/lucide-react) [Source](./packages/lucide-react) |
+| 
| `lucide-vue-next` | [](https://www.npmjs.com/package/lucide-vue-next)  | [Docs](https://lucide.dev/guide/packages/lucide-vue-next) [Source](./packages/lucide-vue-next) |
+| 
| `lucide-svelte` | [](https://www.npmjs.com/package/lucide-svelte)  | [Docs](https://lucide.dev/guide/packages/lucide-svelte) [Source](./packages/lucide-svelte) |
+| 
| `lucide-solid` | [](https://www.npmjs.com/package/lucide-solid)  | [Docs](https://lucide.dev/guide/packages/lucide-solid) [Source](./packages/lucide-solid) |
+| 
| `lucide-preact` | [](https://www.npmjs.com/package/lucide-preact)  | [Docs](https://lucide.dev/guide/packages/lucide-preact) [Source](./packages/lucide-preact) |
+| 
| `lucide-react-native` | [](https://www.npmjs.com/package/lucide-react-native)  | [Docs](https://lucide.dev/guide/packages/lucide-react-native) [Source](./packages/lucide-react-native) |
+| 
| `lucide-angular` | [](https://www.npmjs.com/package/lucide-angular)  | [Docs](https://lucide.dev/guide/packages/lucide-angular) [Source](./packages/lucide-angular) |
+| 
| `lucide-static` | [](https://www.npmjs.com/package/lucide-static)  | [Docs](https://lucide.dev/guide/packages/lucide-static) [Source](./packages/lucide-static) |
### Figma
@@ -196,68 +50,6 @@ Visit [Figma community page](https://www.figma.com/community/plugin/939567362549
-### Awesome backer 🍺
+### Awesome backers 🍺
+
diff --git a/docs/.vitepress/data/packageData.json b/docs/.vitepress/data/packageData.json
index 613ed60e793..c4a62adf164 100644
--- a/docs/.vitepress/data/packageData.json
+++ b/docs/.vitepress/data/packageData.json
@@ -31,24 +31,8 @@
}
]
},
- "lucide-vue": {
- "order": 2,
- "icon": "vue",
- "shields": [
- {
- "alt": "npm",
- "src": "https://img.shields.io/npm/v/lucide-vue",
- "href": "https://www.npmjs.com/package/lucide-vue"
- },
- {
- "alt": "npm",
- "src": "https://img.shields.io/npm/dw/lucide-vue",
- "href": "https://www.npmjs.com/package/lucide-vue"
- }
- ]
- },
"lucide-vue-next": {
- "order": 3,
+ "order": 2,
"icon": "vue-next",
"shields": [
{
@@ -64,7 +48,7 @@
]
},
"lucide-svelte": {
- "order": 4,
+ "order": 3,
"icon": "svelte",
"shields": [
{
@@ -95,24 +79,8 @@
}
]
},
- "lucide-preact": {
- "order": 5,
- "icon": "preact",
- "shields": [
- {
- "alt": "npm",
- "src": "https://img.shields.io/npm/v/lucide-preact",
- "href": "https://www.npmjs.com/package/lucide-preact"
- },
- {
- "alt": "npm",
- "src": "https://img.shields.io/npm/dw/lucide-preact",
- "href": "https://www.npmjs.com/package/lucide-preact"
- }
- ]
- },
"lucide-react-native": {
- "order": 6,
+ "order": 5,
"icon": "react-native",
"shields": [
{
@@ -128,7 +96,7 @@
]
},
"lucide-angular": {
- "order": 7,
+ "order": 6,
"icon": "angular",
"shields": [
{
@@ -143,6 +111,22 @@
}
]
},
+ "lucide-preact": {
+ "order": 7,
+ "icon": "preact",
+ "shields": [
+ {
+ "alt": "npm",
+ "src": "https://img.shields.io/npm/v/lucide-preact",
+ "href": "https://www.npmjs.com/package/lucide-preact"
+ },
+ {
+ "alt": "npm",
+ "src": "https://img.shields.io/npm/dw/lucide-preact",
+ "href": "https://www.npmjs.com/package/lucide-preact"
+ }
+ ]
+ },
"lucide-static": {
"order": 8,
"icon": "svg",
diff --git a/docs/.vitepress/sidebar.ts b/docs/.vitepress/sidebar.ts
index 5833648f071..ad796b96267 100644
--- a/docs/.vitepress/sidebar.ts
+++ b/docs/.vitepress/sidebar.ts
@@ -72,10 +72,6 @@ const sidebar: UserConfig+Lucide icon library for Angular applications. +
+ ++ About + · + Icons + · + Documentation + · + License +
+ # Lucide Angular Implementation of the lucide icon library for angular applications. -> What is lucide? Read it [here](https://github.com/lucide-icons/lucide#what-is-lucide). - ## Installation -```bash -yarn add lucide-angular +```sh +pnpm add lucide-angular ``` -or - -```bash +```sh npm install lucide-angular ``` +```sh +yarn add lucide-angular +``` + +```sh +bun add lucide-angular +``` + ## Documentation For full documentation, visit [lucide.dev](https://lucide.dev/guide/packages/lucide-angular) @@ -45,6 +67,7 @@ Lucide is licensed under the ISC license. See [LICENSE](https://lucide.dev/licen
-### Awesome backer 🍺
+### Awesome backers 🍺
+
diff --git a/packages/lucide-angular/package.json b/packages/lucide-angular/package.json
index 565c5a6ebd3..8a144e9e0b5 100644
--- a/packages/lucide-angular/package.json
+++ b/packages/lucide-angular/package.json
@@ -74,7 +74,7 @@
"zone.js": "~0.11.4"
},
"peerDependencies": {
- "@angular/common": "13.x - 18.x",
- "@angular/core": "13.x - 18.x"
+ "@angular/common": "13.x - 19.x",
+ "@angular/core": "13.x - 19.x"
}
}
diff --git a/packages/lucide-preact/README.md b/packages/lucide-preact/README.md
index 05d37d5d288..0bca38c2793 100644
--- a/packages/lucide-preact/README.md
+++ b/packages/lucide-preact/README.md
@@ -1,30 +1,52 @@
-# Lucide Preact
++Lucide icon library for Preact applications. +
+ ++ About + · + Icons + · + Documentation + · + License +
+ +# Lucide Preact -> What is lucide? Read it [here](https://github.com/lucide-icons/lucide#what-is-lucide). +Implementation of the lucide icon library for Preact applications. ## Installation ```sh -yarn add lucide-preact +pnpm add lucide-preact ``` -or - ```sh npm install lucide-preact ``` +```sh +yarn add lucide-preact +``` + +```sh +bun add lucide-preact +``` + ## Documentation For full documentation, visit [lucide.dev](https://lucide.dev/guide/packages/lucide-preact) @@ -45,6 +67,7 @@ Lucide is licensed under the ISC license. See [LICENSE](https://lucide.dev/licen
-### Awesome backer 🍺
+### Awesome backers 🍺
+
diff --git a/packages/lucide-react-native/README.md b/packages/lucide-react-native/README.md
index f82945d4b28..eef0a6322c2 100644
--- a/packages/lucide-react-native/README.md
+++ b/packages/lucide-react-native/README.md
@@ -1,31 +1,50 @@
++Lucide icon library for React Native applications. +
+ ++ About + · + Icons + · + Documentation + · + License +
# Lucide React Native Implementation of the lucide icon library for React Native applications. -> What is lucide? Read it [here](https://github.com/lucide-icons/lucide#what-is-lucide). - ## Installation -First, ensure that you have `react-native-svg` (version between 12 and 15) installed. Then, install the package: +```sh +pnpm add lucide-react-native +``` ```sh -yarn add lucide-react-native +npm install lucide-react-native ``` -or +```sh +yarn add lucide-react-native +``` ```sh -npm install lucide-react-native +bun add lucide-react-native ``` ## Documentation @@ -48,6 +67,7 @@ Lucide is licensed under the ISC license. See [LICENSE](https://lucide.dev/licen
-### Awesome backer 🍺
+### Awesome backers 🍺
+
diff --git a/packages/lucide-react/README.md b/packages/lucide-react/README.md
index ed816ec26c8..8d02efe9683 100644
--- a/packages/lucide-react/README.md
+++ b/packages/lucide-react/README.md
@@ -1,31 +1,52 @@
++Lucide icon library for React applications. +
-# Lucide React ++ About + · + Icons + · + Documentation + · + License +
+ +# Lucide React -> What is lucide? Read it [here](https://github.com/lucide-icons/lucide#what-is-lucide). +Implementation of the lucide icon library for React applications. ## Installation ```sh -yarn add lucide-react +pnpm add lucide-react ``` -or - ```sh npm install lucide-react ``` +```sh +yarn add lucide-react +``` + +```sh +bun add lucide-react +``` + ## Documentation For full documentation, visit [lucide.dev](https://lucide.dev/guide/packages/lucide-react) @@ -46,6 +67,7 @@ Lucide is licensed under the ISC license. See [LICENSE](https://lucide.dev/licen
-### Awesome backer 🍺
+### Awesome backers 🍺
+
diff --git a/packages/lucide-solid/README.md b/packages/lucide-solid/README.md
index 88abae1be85..0c9a8a62f4e 100644
--- a/packages/lucide-solid/README.md
+++ b/packages/lucide-solid/README.md
@@ -1,31 +1,52 @@
++Lucide icon library for Solid applications. +
+ ++ About + · + Icons + · + Documentation + · + License +
# Lucide Solid Implementation of the lucide icon library for solid applications. -> What is lucide? Read it [here](https://github.com/lucide-icons/lucide#what-is-lucide). - ## Installation ```sh -yarn add lucide-solid +pnpm add lucide-solid ``` -or - ```sh npm install lucide-solid ``` +```sh +yarn add lucide-solid +``` + +```sh +bun add lucide-solid +``` + ## Documentation For full documentation, visit [lucide.dev](https://lucide.dev/guide/packages/lucide-solid) @@ -46,6 +67,7 @@ Lucide is licensed under the ISC license. See [LICENSE](https://lucide.dev/licen
-### Awesome backer 🍺
+### Awesome backers 🍺
+
diff --git a/packages/lucide-static/README.md b/packages/lucide-static/README.md
index e613619aa14..41f3434d2fe 100644
--- a/packages/lucide-static/README.md
+++ b/packages/lucide-static/README.md
@@ -1,12 +1,29 @@
++Lucide icon library with static assets for web applications. +
+ ++ About + · + Icons + · + Documentation + · + License +
# Lucide Static @@ -28,16 +45,20 @@ This package is suitable for very specific use cases for example if you want to ## Installation -## Package Managers +```sh +pnpm add lucide-static +``` ```sh -yarn add lucide-static +npm install lucide-static ``` -or +```sh +yarn add lucide-static +``` ```sh -npm install lucide-static +bun add lucide-static ``` ## Documentation @@ -60,6 +81,7 @@ Lucide is licensed under the ISC license. See [LICENSE](https://lucide.dev/licen
-### Awesome backer 🍺
+### Awesome backers 🍺
+
diff --git a/packages/lucide-svelte/README.md b/packages/lucide-svelte/README.md
index 5d8fb60aa3e..6ca96ea77a3 100644
--- a/packages/lucide-svelte/README.md
+++ b/packages/lucide-svelte/README.md
@@ -1,31 +1,52 @@
++Lucide icon library for Svelte applications. +
+ ++ About + · + Icons + · + Documentation + · + License +
# Lucide Svelte Implementation of the lucide icon library for svelte applications. -> What is lucide? Read it [here](https://github.com/lucide-icons/lucide#what-is-lucide). - ## Installation ```sh -yarn add lucide-svelte +pnpm add lucide-svelte ``` -or - ```sh npm install lucide-svelte ``` +```sh +yarn add lucide-svelte +``` + +```sh +bun add lucide-svelte +``` + ## Documentation For full documentation, visit [lucide.dev](https://lucide.dev/guide/packages/lucide-svelte) @@ -46,6 +67,7 @@ Lucide is licensed under the ISC license. See [LICENSE](https://lucide.dev/licen
-### Awesome backer 🍺
+### Awesome backers 🍺
+
diff --git a/packages/lucide-svelte/package.json b/packages/lucide-svelte/package.json
index 6b4b4bcd4cb..c7d7975383b 100644
--- a/packages/lucide-svelte/package.json
+++ b/packages/lucide-svelte/package.json
@@ -36,7 +36,8 @@
},
"./icons/*": {
"types": "./dist/icons/*.svelte.d.ts",
- "svelte": "./dist/icons/*.svelte"
+ "svelte": "./dist/icons/*.js",
+ "default": "./dist/icons/*.js"
}
},
"typings": "dist/lucide-svelte.d.ts",
@@ -48,7 +49,7 @@
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:package && pnpm build:license",
"copy:license": "cp ../../LICENSE ./LICENSE",
"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:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mjs --exportFileName=index.ts --iconFileExtension=.svelte --importImportFileExtension=.svelte --separateIconFileExport --separateIconFileExportExtension=.ts --withAliases --aliasesFileExtension=.ts --separateAliasesFile --separateAliasesFileExtension=.ts --aliasImportFileExtension=.js --pretty=false",
"build:package": "svelte-package --input ./src",
"build:license": "node ./scripts/appendBlockComments.mjs",
"test": "pnpm build:icons && vitest run",
diff --git a/packages/lucide-svelte/scripts/license.mjs b/packages/lucide-svelte/scripts/license.mjs
index 3c39a02b6f2..3ef4f0306c8 100644
--- a/packages/lucide-svelte/scripts/license.mjs
+++ b/packages/lucide-svelte/scripts/license.mjs
@@ -1,4 +1,4 @@
-import pkg from '../package.json' assert { type: 'json' };
+import pkg from '../package.json' with { type: 'json' };
export function getJSBanner() {
return `/**
diff --git a/packages/lucide-vue-next/README.md b/packages/lucide-vue-next/README.md
index 933197ada66..ad4c3e7ed61 100644
--- a/packages/lucide-vue-next/README.md
+++ b/packages/lucide-vue-next/README.md
@@ -1,32 +1,52 @@
-# Lucide Vue Next
++Lucide icon library for Vue applications. +
-Implementation of the lucide icon library for Vue 3 applications. ++ About + · + Icons + · + Documentation + · + License +
+ +# Lucide Vue + +Implementation of the lucide icon library for Vue 3 applications. ## Installation ```sh -yarn add lucide-vue-next +pnpm add lucide-vue-next ``` -or - ```sh npm install lucide-vue-next ``` +```sh +yarn add lucide-vue-next +``` + +```sh +bun add lucide-vue-next +``` + ## Documentation For full documentation, visit [lucide.dev](https://lucide.dev/guide/packages/lucide-vue-next) @@ -47,6 +67,7 @@ Lucide is licensed under the ISC license. See [LICENSE](https://lucide.dev/licen
-### Awesome backer 🍺
+### Awesome backers 🍺
+
diff --git a/packages/lucide-vue/README.md b/packages/lucide-vue/README.md
index a795cd87eb5..447029d1593 100644
--- a/packages/lucide-vue/README.md
+++ b/packages/lucide-vue/README.md
@@ -1,32 +1,56 @@
++Lucide icon library for Vue 2 applications. +
+ ++ About + · + Icons + · + Documentation + · + License +
+ # Lucide Vue 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) +> :rotating_light: +This package is deprecated. Vue 2 is EOF See [Announcement](https://v2.vuejs.org/eol/). Migrate to Vue 3. +::: ## Installation ```sh -yarn add lucide-vue +pnpm add lucide-vue ``` -or - ```sh npm install lucide-vue ``` +```sh +yarn add lucide-vue +``` + +```sh +bun add lucide-vue +``` + ## Documentation For full documentation, visit [lucide.dev](https://lucide.dev/guide/packages/lucide-vue) @@ -47,6 +71,7 @@ Lucide is licensed under the ISC license. See [LICENSE](https://lucide.dev/licen
-### Awesome backer 🍺
+### Awesome backers 🍺
+
diff --git a/packages/lucide/README.md b/packages/lucide/README.md
index a50739998fe..d034cd2c160 100644
--- a/packages/lucide/README.md
+++ b/packages/lucide/README.md
@@ -1,30 +1,50 @@
++Lucide icon library for web applications. +
+ ++ About + · + Icons + · + Documentation + · + License +
+ # Lucide Implementation of the lucide icon library for web applications. ## Installation -### Package Managers +```sh +pnpm add lucide +``` ```sh npm install lucide ``` ```sh -pnpm install lucide +yarn add lucide ``` ```sh -yarn add lucide +bun add lucide ``` ### CDN @@ -57,6 +77,7 @@ Lucide is licensed under the ISC license. See [LICENSE](https://lucide.dev/licen
-### Awesome backer 🍺
+### Awesome backers 🍺
+
diff --git a/packages/lucide/rollup.config.mjs b/packages/lucide/rollup.config.mjs
index 3d64d9d0e59..a4840c024b5 100644
--- a/packages/lucide/rollup.config.mjs
+++ b/packages/lucide/rollup.config.mjs
@@ -1,7 +1,7 @@
import plugins from '@lucide/rollup-plugins';
import replace from '@rollup/plugin-replace';
import dts from 'rollup-plugin-dts';
-import pkg from './package.json' assert { type: 'json' };
+import pkg from './package.json' with { type: 'json' };
const outputFileName = pkg.name;
const outputDir = 'dist';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 84a29d1c294..935fabbf274 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5072,6 +5072,7 @@ packages:
acorn-import-assertions@1.9.0:
resolution: {integrity: sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==}
+ deprecated: package has been renamed to acorn-import-attributes
peerDependencies:
acorn: ^8
@@ -16793,7 +16794,7 @@ snapshots:
'@swc-node/sourcemap-support': 0.5.1
'@swc/core': 1.7.23
colorette: 2.0.20
- debug: 4.3.6
+ debug: 4.3.7
oxc-resolver: 1.11.0
pirates: 4.0.6
tslib: 2.6.3
@@ -25367,7 +25368,7 @@ snapshots:
'@tsconfig/node14': 1.0.3
'@tsconfig/node16': 1.0.4
'@types/node': 20.4.5
- acorn: 8.14.0
+ acorn: 8.12.1
acorn-walk: 8.3.3
arg: 4.1.3
create-require: 1.1.1
diff --git a/tools/build-icons/building/aliases/generateAliasesFiles.mjs b/tools/build-icons/building/aliases/generateAliasesFiles.mjs
index 52927e7a089..043613475a6 100644
--- a/tools/build-icons/building/aliases/generateAliasesFiles.mjs
+++ b/tools/build-icons/building/aliases/generateAliasesFiles.mjs
@@ -14,6 +14,7 @@ export default async function generateAliasesFiles({
aliasImportFileExtension,
aliasNamesOnly = false,
separateAliasesFile = false,
+ separateAliasesFileExtension,
showLog = true,
}) {
const iconsDistDirectory = path.join(outputDirectory, `icons`);
@@ -96,8 +97,13 @@ export default async function generateAliasesFiles({
: '';
if (separateAliasesFile) {
- const output = `export { default } from "./${iconName}"`;
- const location = path.join(iconsDistDirectory, `${alias.name}${iconFileExtension}`);
+ const output = `export { default } from "./${iconName}${
+ separateAliasesFileExtension ? iconFileExtension : ''
+ }";\n`;
+ const location = path.join(
+ iconsDistDirectory,
+ `${alias.name}${separateAliasesFileExtension ?? iconFileExtension}`,
+ );
await fs.promises.writeFile(location, output, 'utf-8');
}
diff --git a/tools/build-icons/building/generateIconFiles.mjs b/tools/build-icons/building/generateIconFiles.mjs
index 0a8aadd4dff..691729e5913 100644
--- a/tools/build-icons/building/generateIconFiles.mjs
+++ b/tools/build-icons/building/generateIconFiles.mjs
@@ -10,6 +10,8 @@ export default ({
template,
showLog = true,
iconFileExtension = '.js',
+ separateIconFileExport = false,
+ separateIconFileExportExtension,
pretty = true,
iconsDir,
iconMetaData,
@@ -46,6 +48,7 @@ export default ({
deprecated,
deprecationReason,
});
+
const output = pretty
? prettier.format(elementTemplate, {
singleQuote: true,
@@ -56,6 +59,16 @@ export default ({
: elementTemplate;
await fs.promises.writeFile(location, output, 'utf-8');
+
+ if (separateIconFileExport) {
+ const output = `export { default } from "./${iconName}${iconFileExtension}";\n`;
+ const location = path.join(
+ iconsDistDirectory,
+ `${iconName}${separateIconFileExportExtension ?? iconFileExtension}`,
+ );
+
+ await fs.promises.writeFile(location, output, 'utf-8');
+ }
});
Promise.all(writeIconFiles)
diff --git a/tools/build-icons/cli.mjs b/tools/build-icons/cli.mjs
index 31e4830155f..c710cf70765 100755
--- a/tools/build-icons/cli.mjs
+++ b/tools/build-icons/cli.mjs
@@ -34,6 +34,9 @@ const {
aliasNamesOnly = false,
withDynamicImports = false,
separateAliasesFile = false,
+ separateAliasesFileExtension = undefined,
+ separateIconFileExport = false,
+ separateIconFileExportExtension = undefined,
aliasesFileExtension = '.js',
aliasImportFileExtension = '',
pretty = true,
@@ -59,6 +62,8 @@ async function buildIcons() {
template: iconFileTemplate,
showLog: !silent,
iconFileExtension,
+ separateIconFileExport,
+ separateIconFileExportExtension,
pretty: JSON.parse(pretty),
iconsDir: ICONS_DIR,
iconMetaData,
@@ -75,6 +80,7 @@ async function buildIcons() {
exportModuleNameCasing,
aliasImportFileExtension,
separateAliasesFile,
+ separateAliasesFileExtension,
showLog: !silent,
});
}
diff --git a/tools/build-icons/utils/getAliases.mjs b/tools/build-icons/utils/getAliases.mjs
index 342741acdd6..1d469fc06b5 100644
--- a/tools/build-icons/utils/getAliases.mjs
+++ b/tools/build-icons/utils/getAliases.mjs
@@ -5,7 +5,7 @@ async function getAliases(iconDirectory) {
const iconJsons = readSvgDirectory(iconDirectory, '.json');
const aliasesEntries = await Promise.all(
iconJsons.map(async (jsonFile) => {
- const file = await import(path.join(iconDirectory, jsonFile), { assert: { type: 'json' } });
+ const file = await import(path.join(iconDirectory, jsonFile), { with: { type: 'json' } });
return [path.basename(jsonFile, '.json'), file.default];
}),
);
diff --git a/tools/build-icons/utils/getIconMetaData.mjs b/tools/build-icons/utils/getIconMetaData.mjs
index 7c8c149caee..e03bdaa0278 100644
--- a/tools/build-icons/utils/getIconMetaData.mjs
+++ b/tools/build-icons/utils/getIconMetaData.mjs
@@ -6,7 +6,7 @@ async function getIconMetaData(iconDirectory) {
const aliasesEntries = await Promise.all(
iconJsons.map(async (jsonFile) => {
/** eslint-disable */
- const file = await import(path.join(iconDirectory, jsonFile), { assert: { type: 'json' } });
+ const file = await import(path.join(iconDirectory, jsonFile), { with: { type: 'json' } });
return [path.basename(jsonFile, '.json'), file.default];
}),
);
- 
+ 
- 
+ 
- 
+ 
- 
+ 
- 
+ 
- 
+ 
- 
+ 
- 
+ 
- 
+ 