Skip to content

Commit a0e202d

Browse files
karsa-mistmereericfennisCopilot
authored
feat(packages/angular): add new @lucide/angular package (#3897)
* Add new lucide angular package * feat(packages/angular): added initial @lucide/angular package * feat(packages/angular): update readme * feat(packages/angular): update angular.json * docs(packages/angular): added (for now) full documentation for @lucide/angular * docs(packages/angular): added migration guide from lucide-angular * fix(github): fix package label syntax 😅 * fix(lint): fix linting issues * fix(github/angular): add prebuild stage * fix(github/angular): add prebuild stage & fix tests * fix(github/angular): fix LucideIconComponentType, update with _real_ public members * fix(github/angular): add prebuild to build step manually * fix(github/angular): downgrade vitest * fix(packages/angular): fix migration guide code example * fix(packages): add vitest + @vitest/* to pnpm overrides * fix(packages): update pnpm-lock with merged version * Apply suggestions from code review Co-authored-by: Copilot <[email protected]> * fix(packages): fix aria-hidden logic * fix(packages): update pnpm-lock * fix(packages): extract vitest and jsdom to root devDependencies * Fix copy utils script * Format code * feat(packages/angular): switched to self-describing IconData object from separate node+name – no more toKebabCase hackery feat(packages/angular): renamed LucideIconComponentType => LucideIcon, and LucideIcon => LucideDynamicIcon feat(packages/angular): added backwards compatible CSS class support feat(packages/angular): switched to vector-effect: non-scaling-stroke implementation from computed stroke width feat(packages/angular): rewrote icon provider to only accept a list of self-described icons – no more toKebabCase hackery & as an added bonus automatic backwards compatible alias support 🚀 feat(packages/angular): added legacy icon node helper function for passing legacy icons to providers test(packages/angular): added unit tests on LUCIDE_CONFIG provider usage * fix(packages/angular): fix linting issues * feat(packages/angular): extract createLucideIcon logic into helper function, refactor export template to use the iconData object as defined in ExportTemplate * Replace author * Remove private field * fix(packages/angular): remove createLucideIcon, it breaks the package :'( * fix(packages/angular): fix rendering order of child elements (_before_ projected content) * Format package.json * Update docs/guide/packages/angular.md Co-authored-by: Copilot <[email protected]> * Update packages/angular/MIGRATION.md Co-authored-by: Copilot <[email protected]> --------- Co-authored-by: Eric Fennis <[email protected]> Co-authored-by: Copilot <[email protected]>
1 parent d442488 commit a0e202d

54 files changed

Lines changed: 6657 additions & 447 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.eslintignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,4 @@ node_modules
88
docs/images
99
docs/**/examples/
1010
packages/lucide-react/dynamicIconImports.js
11+
packages/angular/.angular

‎.github/ISSUE_TEMPLATE/02_bug_report.yml‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,17 @@ body:
1313
description: Which Lucide packages are affected? You may select more than one.
1414
options:
1515
- label: lucide
16-
- label: lucide-angular
16+
- label: lucide-angular (old version)
17+
- label: '@lucide/angular (new version)'
18+
- label: '@lucide/astro'
1719
- label: lucide-flutter
1820
- label: lucide-preact
1921
- label: lucide-react
2022
- label: lucide-react-native
2123
- label: lucide-solid
22-
- label: lucide-svelte
24+
- label: lucide-static
25+
- label: lucide-svelte (old version)
26+
- label: '@lucide/svelte (new version)'
2327
- label: lucide-vue
2428
- label: lucide-vue-next
2529
- label: lucide-astro

‎.github/ISSUE_TEMPLATE/04_feature_request.yml‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,20 +13,25 @@ body:
1313
description: Which Lucide project do you wish this feature were added to? You may select more than one.
1414
options:
1515
- label: lucide
16-
- label: lucide-angular
16+
- label: lucide-angular (old version)
17+
- label: '@lucide/angular (new version)'
18+
- label: '@lucide/astro'
1719
- label: lucide-flutter
1820
- label: lucide-preact
1921
- label: lucide-react
2022
- label: lucide-react-native
2123
- label: lucide-solid
22-
- label: lucide-svelte
24+
- label: lucide-static
25+
- label: lucide-svelte (old version)
26+
- label: '@lucide/svelte (new version)'
2327
- label: lucide-vue
2428
- label: lucide-vue-next
2529
- label: lucide-astro
2630
- label: '@lucide/icons'
2731
- label: Figma plugin
2832
- label: all JS packages
2933
- label: site
34+
- label: other/not relevant
3035
validations:
3136
required: true
3237
- type: textarea

‎.github/labeler.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@
5959
🅰️ angular package:
6060
- changed-files:
6161
- any-glob-to-any-file:
62+
- 'packages/angular/*'
6263
- 'packages/lucide-angular/*'
6364

6465
# For changes in the lucide preact package

‎.github/workflows/angular.yml‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
name: Lucide Angular checks
2+
3+
on:
4+
pull_request:
5+
paths:
6+
- packages/angular/**
7+
- tools/build-icons/**
8+
- pnpm-lock.yaml
9+
10+
jobs:
11+
build:
12+
runs-on: ubuntu-latest
13+
steps:
14+
- uses: actions/checkout@v6
15+
- uses: pnpm/action-setup@v4
16+
- uses: actions/setup-node@v6
17+
with:
18+
cache: 'pnpm'
19+
node-version-file: 'package.json'
20+
21+
- name: Install dependencies
22+
run: pnpm install --frozen-lockfile
23+
24+
- name: Build
25+
run: pnpm --filter @lucide/angular build
26+
27+
test:
28+
runs-on: ubuntu-latest
29+
steps:
30+
- uses: actions/checkout@v6
31+
- uses: pnpm/action-setup@v4
32+
- uses: actions/setup-node@v6
33+
with:
34+
cache: 'pnpm'
35+
node-version-file: 'package.json'
36+
37+
- name: Install dependencies
38+
run: pnpm install --frozen-lockfile
39+
40+
- name: Test
41+
run: pnpm --filter @lucide/angular test

‎.github/workflows/release.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ jobs:
5858
'lucide-preact',
5959
'lucide-solid',
6060
'lucide-svelte',
61+
'@lucide/angular',
6162
'@lucide/astro',
6263
'@lucide/svelte',
6364
'@lucide/icons',

‎docs/.vitepress/data/packageData.json‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -87,9 +87,25 @@
8787
}
8888
]
8989
},
90-
"lucide-angular": {
90+
"@lucide/angular": {
9191
"order": 6,
9292
"icon": "angular",
93+
"shields": [
94+
{
95+
"alt": "npm",
96+
"src": "https://img.shields.io/npm/v/@lucide/angular",
97+
"href": "https://www.npmjs.com/package/@lucide/angular"
98+
},
99+
{
100+
"alt": "npm",
101+
"src": "https://img.shields.io/npm/dw/@lucide/angular",
102+
"href": "https://www.npmjs.com/package/@lucide/angular"
103+
}
104+
]
105+
},
106+
"lucide-angular": {
107+
"order": 7,
108+
"icon": "angular",
93109
"shields": [
94110
{
95111
"alt": "npm",
@@ -104,7 +120,7 @@
104120
]
105121
},
106122
"lucide-preact": {
107-
"order": 7,
123+
"order": 8,
108124
"icon": "preact",
109125
"shields": [
110126
{
@@ -122,7 +138,7 @@
122138
"@lucide/astro": {
123139
"docsAlias": "lucide-astro",
124140
"packageDirname": "astro",
125-
"order": 8,
141+
"order": 9,
126142
"icon": "astro",
127143
"iconDark": "astro-dark",
128144
"shields": [
@@ -139,7 +155,7 @@
139155
]
140156
},
141157
"lucide-static": {
142-
"order": 9,
158+
"order": 10,
143159
"icon": "svg",
144160
"shields": [
145161
{

‎docs/.vitepress/sidebar.ts‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -69,39 +69,39 @@ const sidebar: UserConfig<DefaultTheme.Config>['themeConfig']['sidebar'] = {
6969
link: '/guide/packages/lucide',
7070
},
7171
{
72-
text: 'Lucide React',
72+
text: 'React',
7373
link: '/guide/packages/lucide-react',
7474
},
7575
{
76-
text: 'Lucide Vue',
76+
text: 'Vue',
7777
link: '/guide/packages/lucide-vue',
7878
},
7979
{
80-
text: 'Lucide Svelte',
80+
text: 'Svelte',
8181
link: '/guide/packages/lucide-svelte',
8282
},
8383
{
84-
text: 'Lucide Solid',
84+
text: 'Solid',
8585
link: '/guide/packages/lucide-solid',
8686
},
8787
{
88-
text: 'Lucide React Native',
88+
text: 'React Native',
8989
link: '/guide/packages/lucide-react-native',
9090
},
9191
{
92-
text: 'Lucide Angular',
93-
link: '/guide/packages/lucide-angular',
92+
text: 'Angular',
93+
link: '/guide/packages/angular',
9494
},
9595
{
96-
text: 'Lucide Preact',
96+
text: 'Preact',
9797
link: '/guide/packages/lucide-preact',
9898
},
9999
{
100-
text: 'Lucide Astro',
100+
text: 'Astro',
101101
link: '/guide/packages/lucide-astro',
102102
},
103103
{
104-
text: 'Lucide Static',
104+
text: 'Static',
105105
link: '/guide/packages/lucide-static',
106106
},
107107
{

‎docs/.vitepress/theme/components/home/HomePackagesSection.data.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export default {
3333
label: 'Lucide documentation for Preact',
3434
},
3535
{
36-
name: 'lucide-angular',
36+
name: 'angular',
3737
logo: '/framework-logos/angular.svg',
3838
label: 'Lucide documentation for Angular',
3939
},

‎docs/guide/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ However, not everyone can understand them easily. Read more about [how to use Lu
2929

3030
## Official Packages
3131

32-
Lucide's official packages are designed to work on different platforms, making it easier for users to integrate icons into their projects. The packages are available for various technologies, including [Web (Vanilla)](https://lucide.dev/guide/packages/lucide), [React](https://lucide.dev/guide/packages/lucide-react), [React Native](https://lucide.dev/guide/packages/lucide-react-native), [Vue](https://lucide.dev/guide/packages/lucide-vue), [Vue 3](https://lucide.dev/guide/packages/lucide-vue-next), [Svelte](https://lucide.dev/guide/packages/lucide-svelte), [Preact](https://lucide.dev/guide/packages/lucide-preact), [Solid](https://lucide.dev/guide/packages/lucide-solid), [Angular](https://lucide.dev/guide/packages/lucide-angular), [Astro](https://lucide.dev/guide/packages/lucide-astro), and [NodeJS](https://lucide.dev/guide/packages/lucide-static#nodejs).
32+
Lucide's official packages are designed to work on different platforms, making it easier for users to integrate icons into their projects. The packages are available for various technologies, including [Web (Vanilla)](https://lucide.dev/guide/packages/lucide), [React](https://lucide.dev/guide/packages/lucide-react), [React Native](https://lucide.dev/guide/packages/lucide-react-native), [Vue](https://lucide.dev/guide/packages/lucide-vue), [Vue 3](https://lucide.dev/guide/packages/lucide-vue-next), [Svelte](https://lucide.dev/guide/packages/lucide-svelte), [Preact](https://lucide.dev/guide/packages/lucide-preact), [Solid](https://lucide.dev/guide/packages/lucide-solid), [Angular](https://lucide.dev/guide/packages/angular), [Astro](https://lucide.dev/guide/packages/lucide-astro), and [NodeJS](https://lucide.dev/guide/packages/lucide-static#nodejs).
3333

3434
## Community
3535

0 commit comments

Comments
 (0)