Skip to content

Commit e8962f1

Browse files
BF150BF150
committed
changed sample
added variants for used themes
1 parent c0c5fd4 commit e8962f1

File tree

6 files changed

+105
-102
lines changed

6 files changed

+105
-102
lines changed

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

Lines changed: 0 additions & 51 deletions
This file was deleted.

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

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import React, { useEffect, useState } from 'react';
2+
3+
import { KolButton, KolIcon, KolInputText } from '@public-ui/react-v19';
4+
5+
import type { FC } from 'react';
6+
import { fetchVariantData } from '../../shares/fetchVariantData';
7+
import { SampleDescription } from '../SampleDescription';
8+
9+
export const IconFont: FC = () => {
10+
const [iconVariants, setIconVariants] = useState<Array<string>>([]);
11+
const [iconVariantsButton, setIconVariantsButton] = useState<Array<string>>([]);
12+
const [iconVariantsInput, setIconVariantsInput] = useState<Array<string>>([]);
13+
14+
useEffect(() => {
15+
const theme = document.body.dataset.theme;
16+
if (!theme) {
17+
return;
18+
}
19+
fetchVariantData(theme, 'iconVariants').then((response: string[]) => {
20+
setIconVariants(response);
21+
});
22+
fetchVariantData(theme, 'iconVariantsButton').then((response: string[]) => {
23+
setIconVariantsButton(response);
24+
});
25+
fetchVariantData(theme, 'iconVariantsInput').then((response: string[]) => {
26+
setIconVariantsInput(response);
27+
});
28+
}, []);
29+
30+
return (
31+
<>
32+
<SampleDescription>
33+
<p>KolIcon renders different icon fonts depending on your theme.</p>
34+
</SampleDescription>
35+
36+
<div className="grid grid-cols-2 gap-8 p-8">
37+
{!Array.isArray(iconVariants) || iconVariants.length === 0 ? (
38+
<p>This theme has no variants for icons.</p>
39+
) : (
40+
iconVariants.map((element) => {
41+
return (
42+
<div className="flex gap-4" key={element}>
43+
<KolIcon _label="" _icons={element} />
44+
<span>&lt;KolIcon _icons='{element}' _label="" /&gt;</span>
45+
</div>
46+
);
47+
})
48+
)}
49+
</div>
50+
<div className="grid grid-cols-2 gap-8 p-8">
51+
{!Array.isArray(iconVariantsButton) || iconVariantsButton.length === 0 ? (
52+
<p>This theme has no variants for icons in buttons.</p>
53+
) : (
54+
iconVariantsButton.map((element) => {
55+
return (
56+
<div className="flex gap-4 items-center" key={element}>
57+
<KolButton _icons={element} _label="Button" _variant="primary" />
58+
<span>&lt;KolButton _icons='{element}' _label="Button" _variant="primary" /&gt;</span>
59+
</div>
60+
);
61+
})
62+
)}
63+
</div>
64+
<div className="grid gap-8 p-8">
65+
{!Array.isArray(iconVariantsInput) || iconVariantsInput.length === 0 ? (
66+
<p>This theme has no variants for icons in inputs.</p>
67+
) : (
68+
iconVariantsInput.map((element) => {
69+
return (
70+
<div className="flex gap-4 items-center" key={element}>
71+
<KolInputText _icons={element} _label="Input with Icon" />
72+
<span>&lt;KolInputText _icons='{element}' _label="Input with Icon" /&gt;</span>
73+
</div>
74+
);
75+
})
76+
)}
77+
</div>
78+
</>
79+
);
80+
};

‎packages/samples/react/src/components/icon/routes.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import type { Routes } from '../../shares/types';
22
import { IconAllKolicons } from './all-kolicons';
33
import { IconBasic } from './basic';
4-
import { IconFontAwesome } from './font-awesome';
4+
import { IconFont } from './font';
55

66
export const ICON_ROUTES: Routes = {
77
icon: {
88
basic: IconBasic,
99
'all-kolicons': IconAllKolicons,
10-
'font-awesome': IconFontAwesome,
10+
font: IconFont,
1111
},
1212
};

‎packages/themes/bwst/assets/variants/inject-variants_bwst.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"iconVariants": [
3+
"kolicon-house",
4+
"kolicon-settings",
5+
"kolicon-kolibri",
6+
"kolicon-alert-warning"
7+
],
8+
"iconVariantsButton": [
9+
"kolicon-settings"
10+
],
11+
"iconVariantsInput": [
12+
"kolicon-version"
13+
]
14+
}

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

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
{
22
"iconVariants": [
33
"fa-solid fa-house",
4-
"fa-solid fa-circle-user",
5-
"fa-solid fa-truck",
6-
"fa-solid fa-city",
74
"fa-solid fa-heart",
85
"fa-solid fa-thumbs-up",
96
"fa-brands fa-github"
107
],
8+
"iconVariantsButton": [
9+
"fa-solid fa-circle-user"
10+
],
1111
"iconVariantsInput": [
12-
"icon icon-danger",
13-
"icon icon-content-copy"
12+
"fa-solid fa-city"
1413
]
15-
}
14+
}

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

Lines changed: 4 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -4,51 +4,12 @@
44
"icon icon-dark-mode",
55
"icon icon-light-mode",
66
"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"
7+
"icon icon-warning"
8+
],
9+
"iconVariantsButton": [
10+
"icon icon-settings"
4911
],
5012
"iconVariantsInput": [
51-
"icon icon-danger",
5213
"icon icon-content-copy"
5314
]
5415
}

0 commit comments

Comments
 (0)
⚡