Skip to content

Commit d8fb6b3

Browse files
Char2sGuChar2sGu
committed
feat(icons): add the icons package
1 parent aeb414f commit d8fb6b3

19 files changed

Lines changed: 386 additions & 0 deletions

‎README.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ Angularity is a collection of packages that provide high-level abstractions and
1010
| `cdk` | Angular CDK extensions | [docs](https://char2sgu.github.io/angularity/packages/cdk) , [source](https://github.com/Char2sGu/angularity/tree/develop/packages/cdk) |
1111
| `forms` | Angular Forms utilities | [docs](https://char2sgu.github.io/angularity/packages/forms) , [source](https://github.com/Char2sGu/angularity/tree/develop/packages/forms) |
1212
| `router` | Angular Router utilities | [docs](https://char2sgu.github.io/angularity/packages/router) , [source](https://github.com/Char2sGu/angularity/tree/develop/packages/router) |
13+
| `icons` | flexible SVG icons solution | [docs](https://char2sgu.github.io/angularity/packages/icons) , [source](https://github.com/Char2sGu/angularity/tree/develop/packages/icons) |
1314
| `elements` | Angular Elements utilities | [docs](https://char2sgu.github.io/angularity/packages/elements) , [source](https://github.com/Char2sGu/angularity/tree/develop/packages/elements) |
1415
| `theming` | programmatic runtime theming system leveraging CSS variables | [docs](https://char2sgu.github.io/angularity/packages/theming) , [source](https://github.com/Char2sGu/angularity/tree/develop/packages/theming) |
1516
| `theming-material` | Material Design theme builders for the `theming` package | [docs](https://char2sgu.github.io/angularity/packages/theming-material) , [source](https://github.com/Char2sGu/angularity/tree/develop/packages/theming-material) |
@@ -26,6 +27,7 @@ npm i \
2627
@angularity/cdk \
2728
@angularity/forms \
2829
@angularity/router \
30+
@angularity/icons \
2931
@angularity/elements \
3032
@angularity/theming \
3133
@angularity/theming-material \
@@ -34,3 +36,9 @@ npm i \
3436
@angularity/config-files \
3537
@angularity/fire
3638
```
39+
40+
To update all Angularity packages, execute:
41+
42+
```sh
43+
npx update-by-scope @angularity
44+
```

‎docs/src/content/packages.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export const PACKAGES = [
88
'cdk/portal',
99
'!forms',
1010
'router',
11+
'icons',
1112
'elements',
1213
'theming',
1314
'theming-material',

‎docs/src/content/packages/icons/index.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
The `@angularity/icons` package offers a simple solution to manage and display SVG icons in Angular applications.
2+
3+
```sh
4+
npm i @angularity/{core,icons}
5+
```
6+
7+
## Signature Symbols
8+
9+
The following symbols are the signature symbols of the `@angularity/icons` package.
10+
Click on the symbol to see the detailed documentation.
11+
12+
> **note**
13+
> All Angularity symbols are well-documented with JSDoc.
14+
15+
### Exported from `@angularity/icons`
16+
17+
Top-level:
18+
19+
- `provideIcons`
20+
{{ JSDoc.description("packages/icons/src/public-api.ts#provideIcons") }}
21+
- `AglIcon`
22+
{{ JSDoc.description("packages/icons/src/public-api.ts#AglIcon") }}

‎docs/src/content/packages/icons/ng-doc.page.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { NgDocPage } from '@ng-doc/core';
2+
3+
import { packageIndexOf } from '../../package-index';
4+
import Category from '../ng-doc.category';
5+
6+
const page: NgDocPage = {
7+
category: Category,
8+
title: `Icons`,
9+
mdFile: './index.md',
10+
order: packageIndexOf('icons'),
11+
};
12+
13+
export default page;

‎package-lock.json‎

Lines changed: 31 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@
5555
"karma-jasmine-html-reporter": "~2.1.0",
5656
"lint-staged": "^15.2.0",
5757
"ng-packagr": "20.1.0",
58+
"node-html-parser": "^7.0.1",
5859
"nx": "21.3.10",
5960
"prettier": "^3.2.4",
6061
"rxfire": "^6.0.5",

‎packages/icons/ng-package.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
3+
"dest": "../../dist/icons",
4+
"lib": {
5+
"entryFile": "src/public-api.ts"
6+
}
7+
}

‎packages/icons/package.json‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "@angularity/icons",
3+
"version": "19.0.3",
4+
"sideEffects": false,
5+
"description": "custom SVG icons for Angular",
6+
"peerDependencies": {
7+
"@angular/common": ">=19",
8+
"@angular/core": ">=19",
9+
"@angular/platform-browser": "20.1.4",
10+
"@angularity/core": "*",
11+
"node-html-parser": "^7.0.1",
12+
"rxjs": ">=7"
13+
},
14+
"dependencies": {
15+
"tslib": "2.x.x"
16+
},
17+
"author": "Char2s <char2s@outlook.com>",
18+
"license": "Apache-2.0",
19+
"repository": {
20+
"type": "git",
21+
"url": "git+https://github.com/Char2sGu/angularity.git"
22+
},
23+
"bugs": {
24+
"url": "https://github.com/Char2sGu/angularity/issues"
25+
},
26+
"homepage": "https://github.com/Char2sGu/angularity#readme"
27+
}

‎packages/icons/project.json‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "icons",
3+
"$schema": "../../node_modules/nx/schemas/project-schema.json",
4+
"projectType": "library",
5+
"sourceRoot": "packages/icons/src",
6+
"prefix": "agl",
7+
"targets": {
8+
"build": {
9+
"executor": "@angular-devkit/build-angular:ng-packagr",
10+
"options": {
11+
"project": "packages/icons/ng-package.json"
12+
},
13+
"configurations": {
14+
"production": {
15+
"tsConfig": "packages/icons/tsconfig.lib.prod.json"
16+
},
17+
"development": {
18+
"tsConfig": "packages/icons/tsconfig.lib.json"
19+
}
20+
},
21+
"defaultConfiguration": "production"
22+
},
23+
"test": {
24+
"executor": "@angular-devkit/build-angular:karma",
25+
"options": {
26+
"tsConfig": "packages/icons/tsconfig.spec.json",
27+
"polyfills": ["zone.js", "zone.js/testing"]
28+
}
29+
},
30+
"nx-release-publish": {
31+
"dependsOn": ["build", "^nx-release-publish"]
32+
}
33+
}
34+
}

‎packages/icons/src/icon-processing.ts‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/**
2+
* Process raw icon svg by removing any hardcoded
3+
* dimensions and colors and apply additional styles
4+
* so that they can adapt to the component settings.
5+
* @param input the raw svg string
6+
* @returns the processed svg string
7+
*
8+
* @example
9+
* ```ts
10+
* import { processIconSvg as i } from '@angularity/icons';
11+
* export const iArrow = i`<svg width="24" height="24" fill="none" stroke="black"><path d="M12 5v14m7-7H5"/></svg>`;
12+
* ```
13+
*/
14+
export async function processIconSvg(
15+
input: string | TemplateStringsArray,
16+
): Promise<string> {
17+
const raw = Array.isArray(input) ? input[0] : input;
18+
19+
const { parse } = await import('node-html-parser').then((m) => m.default);
20+
21+
const root = parse(raw);
22+
23+
const svg = root.querySelector('svg');
24+
if (!svg) throw new Error('SVG element not found');
25+
svg.removeAttribute('width');
26+
svg.removeAttribute('height');
27+
svg.setAttribute('aria-hidden', 'true');
28+
svg.setAttribute(
29+
'style',
30+
'width: var(--icon-size); height: var(--icon-size)',
31+
);
32+
33+
root.querySelectorAll('svg *').forEach((node) => {
34+
node.removeAttribute('stroke-width');
35+
if (node.hasAttribute('stroke') && node.getAttribute('stroke') !== 'none')
36+
root.setAttribute('stroke', 'currentColor');
37+
if (node.hasAttribute('fill') && node.getAttribute('fill') !== 'none')
38+
node.setAttribute('fill', 'currentColor');
39+
if (
40+
['PATH'].includes(node.tagName) &&
41+
!node.hasAttribute('fill') &&
42+
!node.hasAttribute('stroke')
43+
)
44+
node.setAttribute('fill', 'currentColor');
45+
});
46+
47+
return root.outerHTML;
48+
}

0 commit comments

Comments
 (0)