Skip to content

Commit c0c5fd4

Browse files
BF150BF150
committed
first try
1 parent 9c72fc9 commit c0c5fd4

File tree

5 files changed

+142
-29
lines changed

5 files changed

+142
-29
lines changed

‎packages/samples/react/src/components/icon/font-awesome.tsx‎

Lines changed: 43 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,51 @@
1-
import React from 'react';
1+
import React, { useEffect, useState } from 'react';
22

33
import { KolIcon, KolInputText } from '@public-ui/react-v19';
44

55
import type { FC } from 'react';
6+
import { fetchVariantData } from '../../shares/fetchVariantData';
67
import { SampleDescription } from '../SampleDescription';
78

8-
export const IconFontAwesome: FC = () => (
9-
<>
10-
<SampleDescription>
11-
<p>KolIcon renders Font Awesome icons, if you have added this font to your theme. We are showing Font Awesome Free 6.1.1.</p>
12-
</SampleDescription>
9+
export const IconFontAwesome: FC = () => {
10+
const [iconVariants, setIconVariants] = useState<Array<string>>([]);
1311

14-
<div className="grid gap-4">
15-
<KolIcon className="block" _label="" _icons="fa-solid fa-house"></KolIcon>
16-
<KolIcon className="block" _label="" _icons="fa-solid fa-circle-user"></KolIcon>
17-
<KolIcon className="block" _label="" _icons="fa-solid fa-truck"></KolIcon>
18-
<KolIcon className="block" _label="" _icons="fa-solid fa-city"></KolIcon>
19-
<KolIcon className="block" _label="" _icons="fa-solid fa-heart"></KolIcon>
20-
<KolIcon className="block" _label="" _icons="fa-solid fa-thumbs-up"></KolIcon>
21-
<KolIcon className="block" _label="" _icons="fa-brands fa-github"></KolIcon>
12+
useEffect(() => {
13+
const theme = document.body.dataset.theme;
14+
if (!theme) {
15+
return;
16+
}
17+
fetchVariantData(theme, 'iconVariants').then((response: string[]) => {
18+
setIconVariants(response);
19+
});
20+
}, []);
2221

23-
<KolInputText
24-
_label={'With Font Awesome icons'}
25-
_icons={{
26-
left: {
27-
icon: 'fa-solid fa-phone',
28-
},
29-
right: {
30-
icon: 'fa-solid fa-arrow-right',
31-
},
32-
}}
33-
/>
34-
</div>
35-
</>
36-
);
22+
return (
23+
<>
24+
<SampleDescription>
25+
<p>KolIcon renders Font Awesome icons, if you have added this font to your theme. We are showing Font Awesome Free 6.1.1.</p>
26+
</SampleDescription>
27+
28+
<div className="grid gap-4">
29+
{!Array.isArray(iconVariants) || iconVariants.length === 0 ? (
30+
<p>This theme has no variants for this component.</p>
31+
) : (
32+
iconVariants.map((element) => {
33+
return <KolIcon className="block" _label="" _icons={element} key={element}></KolIcon>;
34+
})
35+
)}
36+
37+
<KolInputText
38+
_label={'With Font Awesome icons'}
39+
_icons={{
40+
left: {
41+
icon: 'fa-solid fa-phone',
42+
},
43+
right: {
44+
icon: 'fa-solid fa-arrow-right',
45+
},
46+
}}
47+
/>
48+
</div>
49+
</>
50+
);
51+
};

‎packages/samples/react/src/shares/fetchVariantData.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
export async function fetchVariantData(theme: string, variant: string): Promise<string[]> {
2+
return fetch('/assets/variants/inject-variants_' + theme + '.json')
3+
.then((response) => {
4+
if (response.status === 404) {
5+
// No variants file for this theme is an expected state.
6+
return [];
7+
}
8+
if (!response.ok) {
9+
console.info('Error fetching variants: HTTP ' + response.status);
10+
return [];
11+
}
12+
return response.json();
13+
})
14+
.then((json) => {
15+
console.log(json);
16+
if (!json) {
17+
return [];
18+
}
19+
const data = (json as Record<string, unknown>)[variant];
20+
if (Array.isArray(data)) {
21+
const variants = data.filter((item): item is string => typeof item === 'string');
22+
return variants;
23+
} else {
24+
return [];
25+
}
26+
})
27+
.catch((error) => {
28+
console.info('No theme variant file found or file could not be parsed', error);
29+
return [];
30+
});
31+
}

‎packages/themes/default/assets/variants/inject-variants_default.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"iconVariants": [
3+
"fa-solid fa-house",
4+
"fa-solid fa-circle-user",
5+
"fa-solid fa-truck",
6+
"fa-solid fa-city",
7+
"fa-solid fa-heart",
8+
"fa-solid fa-thumbs-up",
9+
"fa-brands fa-github"
10+
],
11+
"iconVariantsInput": [
12+
"icon icon-danger",
13+
"icon icon-content-copy"
14+
]
15+
}

‎packages/themes/kern/assets/variants/inject-variants_kern-v2.json‎

Lines changed: 52 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,54 @@
11
{
2-
"linkVariants": ["small"]
2+
"linkVariants": ["small"],
3+
"iconVariants": [
4+
"icon icon-dark-mode",
5+
"icon icon-light-mode",
6+
"icon icon-brightness-medium",
7+
"icon icon-warning",
8+
"icon icon-visibility-off",
9+
"icon icon-visibility",
10+
"icon icon-success",
11+
"icon icon-sign-language",
12+
"icon icon-search",
13+
"icon icon-question-mark",
14+
"icon icon-open-in",
15+
"icon icon-more-vert",
16+
"icon icon-mail",
17+
"icon icon-logout",
18+
"icon icon-keyboard-double-arrow-right",
19+
"icon icon-keyboard-double-arrow-left",
20+
"icon icon-info",
21+
"icon icon-help",
22+
"icon icon-home",
23+
"icon icon-edit",
24+
"icon icon-easy-language",
25+
"icon icon-drive-folder-upload",
26+
"icon icon-draft",
27+
"icon icon-download",
28+
"icon icon-delete",
29+
"icon icon-danger",
30+
"icon icon-content-copy",
31+
"icon icon-close",
32+
"icon icon-chevron-right",
33+
"icon icon-chevron-left",
34+
"icon icon-checklist",
35+
"icon icon-check",
36+
"icon icon-calendar-today",
37+
"icon icon-autorenew",
38+
"icon icon-arrow-back",
39+
"icon icon-arrow-forward",
40+
"icon icon-arrow-up",
41+
"icon icon-arrow-down",
42+
"icon icon-add",
43+
"icon icon-palette",
44+
"icon icon-remove",
45+
"icon icon-save",
46+
"icon icon-settings",
47+
"icon icon-unfold-less",
48+
"icon icon-view-timeline"
49+
],
50+
"iconVariantsInput": [
51+
"icon icon-danger",
52+
"icon icon-content-copy"
53+
]
354
}

‎packages/themes/kern/src/global/icons.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use '../../assets/material-symbols-subset/variables' as *;
2+
@use '../../assets/material-symbols-subset/style.css' as *;
23

34
[class*=' kolicon-'] {
45
/* Icon mappings */

0 commit comments

Comments
 (0)
⚡