Skip to content

Commit d1e2c48

Browse files
brandyscarneyIonitron
brandyscarney
and
Ionitron
authored
feat(icon): add font icon support to ion-icon (#1502)
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Co-authored-by: ionitron <hi@ionicframework.com>
1 parent b2d0708 commit d1e2c48

27 files changed

Lines changed: 698 additions & 82 deletions

‎jest.config.mjs‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,9 @@ import { createJestStencilPreset } from 'jest-stencil-runner';
66
const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
77

88
export default createJestStencilPreset({
9-
rootDir: __dirname,
9+
rootDir: __dirname,
1010
// Add any additional Jest configuration here
11+
setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
1112
collectCoverageFrom: [
1213
'src/**/*.{ts,tsx}',
1314
'!src/**/*.d.ts',

‎jest.setup.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
const Stencil = require('@stencil/core');
2+
Stencil.Build.isBrowser = true;

‎scripts/readme.md‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,11 @@ npm start
2828

2929
## Release Steps
3030

31-
The release script will ask what version to use. After the script completes, double check the `www/cheatsheet.html` to ensure everything is good to go.
32-
33-
Next, update `CHANGELOG.md`, then commit and push your changes Github.
34-
35-
```sh
36-
npm run release
37-
```
38-
39-
Triple check the version number is correct, and choose which tag this should be released as. If it's a pre-release, it should be `dev`.
31+
Releases are automated via GitHub Actions. To trigger a release:
32+
33+
1. Go to the [Release Orchestrator](https://github.com/ionic-team/ionicons/actions/workflows/release-orchestrator.yml) workflow
34+
2. Click "Run workflow"
35+
3. Select the release type:
36+
- **dev** — Creates a pre-release with a timestamp-based version (e.g., `8.0.14-dev.11784821417.1c794397`)
37+
- **production** — Creates a semver release; select `patch`, `minor`, or `major`
38+
4. The workflow will build, publish to NPM, and create a GitHub release (for production releases)

‎src/components/icon/icon.css‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,13 @@
44
width: 1em;
55
height: 1em;
66

7-
contain: strict;
7+
font-size: 1em;
8+
9+
contain: layout style;
810

911
fill: currentColor;
1012

1113
box-sizing: content-box !important;
12-
1314
}
1415

1516
:host .ionicon {
@@ -24,7 +25,16 @@
2425
stroke-width: var(--ionicon-stroke-width, 32px);
2526
}
2627

27-
.icon-inner,
28+
.icon-inner {
29+
display: flex;
30+
31+
align-items: center;
32+
justify-content: center;
33+
34+
width: 100%;
35+
height: 100%;
36+
}
37+
2838
.ionicon,
2939
svg {
3040
display: block;
@@ -33,6 +43,14 @@ svg {
3343
width: 100%;
3444
}
3545

46+
/* Slotted Content
47+
* -----------------------------------------------------------
48+
*/
49+
50+
::slotted(*) {
51+
font-size: inherit !important;
52+
}
53+
3654
/* Icon RTL
3755
* -----------------------------------------------------------
3856
*/

‎src/components/icon/icon.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -221,7 +221,9 @@ export class Icon {
221221
{Build.isBrowser && this.svgContent ? (
222222
<div class="icon-inner" innerHTML={this.svgContent}></div>
223223
) : (
224-
<div class="icon-inner"></div>
224+
<div class="icon-inner">
225+
<slot></slot>
226+
</div>
225227
)}
226228
</Host>
227229
);

‎src/components/icon/test/a11y/index.html‎

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@
88
<script nomodule src="/build/ionicons.js"></script>
99
<link rel="stylesheet" href="../styles.css" />
1010
<script src="../header.js"></script>
11+
12+
<!-- Font Awesome Icons -->
13+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
1114
</head>
1215

1316
<body>
@@ -16,16 +19,41 @@
1619
<main>
1720
<h1>Icon - Accessibility</h1>
1821

19-
<h2>Icon with aria-label</h2>
22+
<h2>SVG icon with aria-label</h2>
2023
<ion-icon name="cellular" aria-label="Mobile data"></ion-icon>
2124

22-
<h2>Button with aria-label</h2>
25+
<h2>Button with aria-label and SVG icon</h2>
2326
<button aria-label="Mobile data">
2427
<ion-icon name="cellular" aria-hidden="true"></ion-icon>
2528
</button>
2629

27-
<h2>Icon with aria-hidden</h2>
30+
<h2>SVG icon with aria-hidden</h2>
2831
<ion-icon name="cellular" aria-hidden="true"></ion-icon>
32+
33+
<hr />
34+
35+
<h2>Font icon with aria-label</h2>
36+
<ion-icon aria-label="Mobile data">
37+
<i class="fa fa-home"></i>
38+
</ion-icon>
39+
40+
<h2>Button with aria-label and font icon</h2>
41+
<button aria-label="Mobile data">
42+
<ion-icon aria-hidden="true">
43+
<i class="fa fa-home"></i>
44+
</ion-icon>
45+
</button>
46+
47+
<h2>Font icon with aria-hidden</h2>
48+
<ion-icon aria-hidden="true">
49+
<i class="fa fa-home"></i>
50+
</ion-icon>
2951
</main>
52+
53+
<style>
54+
ion-icon {
55+
font-size: 32px;
56+
}
57+
</style>
3058
</body>
3159
</html>

‎src/components/icon/test/basic/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,10 @@ <h2>Custom CSS</h2>
8888
</main>
8989

9090
<style>
91+
ion-icon {
92+
font-size: 32px;
93+
}
94+
9195
.custom {
9296
stroke: red;
9397
fill: blue;

‎src/components/icon/test/csp/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,10 @@ <h2>Default</h2>
3939
</body>
4040

4141
<style>
42+
ion-icon {
43+
font-size: 32px;
44+
}
45+
4246
.custom {
4347
stroke: red;
4448
fill: goldenrod;

‎src/components/icon/test/dynamic-type/icon.e2e.ts-snapshots/icon-dynamic-type-Mobile-Chrome-linux.png‎

6.01 KB
Loading

‎src/components/icon/test/dynamic-type/icon.e2e.ts-snapshots/icon-dynamic-type-Mobile-Firefox-linux.png‎

6.79 KB
Loading

0 commit comments

Comments
 (0)