@keboola/design 1.0.0 → 1.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -29
- package/package.json +4 -4
- package/src/components/Icon/Icons.mdx +2 -2
package/README.md
CHANGED
|
@@ -51,33 +51,6 @@ For more information, read [Vitest's documentation](https://vitest.dev/guide/)
|
|
|
51
51
|
|
|
52
52
|
### Icons
|
|
53
53
|
|
|
54
|
-
All icons should use `Icon` component, which is a wrapper around `FontAwesomeIcon`.
|
|
54
|
+
All icons should use the `Icon` component, which is a wrapper around `FontAwesomeIcon`. Browse the available icons in the Storybook `Icons` page.
|
|
55
55
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
First, go to [FontAwesome kit](https://fontawesome.com/kits/be8bcf7e5e/icons) and log in via [credentials from 1Password](https://start.1password.com/open/i?a=Z6RK6YPRYZESDHSAB2SWYZSSUM&v=3eqzewv3lbgwupxpmehccbswgq&i=6xk57yia2evbo63mdrtkwtluky&h=keboola.1password.com).
|
|
59
|
-
|
|
60
|
-
**Adding existing FontAwesome icons:**
|
|
61
|
-
|
|
62
|
-
- In <b>Pro Styles</b> you pick one style (e.g. <b>Solid</b>), search icon name and click on it
|
|
63
|
-
- After you selected all new icons, click on <b>Save Subset</b>
|
|
64
|
-
|
|
65
|
-
**Adding custom icons:**
|
|
66
|
-
|
|
67
|
-
- Click on <b>Upload Icons</b> tab
|
|
68
|
-
- Upload your custom SVG icon(s). Make sure the SVG follows FontAwesome's requirements:
|
|
69
|
-
- Single color (black fills, no strokes)
|
|
70
|
-
- Square viewBox (e.g., `0 0 512 512`)
|
|
71
|
-
- Clean, optimized SVG code
|
|
72
|
-
- Give your icon a meaningful name (use kebab-case)
|
|
73
|
-
- Click <b>Upload</b> and then <b>Save Subset</b>
|
|
74
|
-
|
|
75
|
-
**Finalizing changes:**
|
|
76
|
-
|
|
77
|
-
- Update the kit NPM package by running:
|
|
78
|
-
|
|
79
|
-
```shell
|
|
80
|
-
yarn workspace @keboola/design up @awesome.me/kit-be8bcf7e5e
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
**Note:** When using custom icons in code, you must use the `fak` prefix (e.g., `<Icon icon={['fak', 'custom-icon']} />`)
|
|
56
|
+
When using custom icons (prefix `fak`), pass the icon as a tuple: `<Icon icon={['fak', 'custom-icon']} />`.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@keboola/design",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.1",
|
|
4
4
|
"description": "Keboola UI platform design system — shadcn-aligned React primitives, Keboola-branded blocks, and the form bindings built on TanStack Form.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -98,9 +98,9 @@
|
|
|
98
98
|
"@codemirror/view": "^6.41.0",
|
|
99
99
|
"@fortawesome/fontawesome-svg-core": "^6.7.2",
|
|
100
100
|
"@fortawesome/react-fontawesome": "^0.2.2",
|
|
101
|
-
"@keboola/codemirror-lang-sfsql": "
|
|
102
|
-
"@keboola/codemirror-lang-sql": "
|
|
103
|
-
"@keboola/tailwind-config": "
|
|
101
|
+
"@keboola/codemirror-lang-sfsql": "^1.1.0",
|
|
102
|
+
"@keboola/codemirror-lang-sql": "^0.2.0",
|
|
103
|
+
"@keboola/tailwind-config": "^0.1.1",
|
|
104
104
|
"@lexical/code": "^0.42.0",
|
|
105
105
|
"@lexical/link": "^0.42.0",
|
|
106
106
|
"@lexical/list": "^0.42.0",
|
|
@@ -9,9 +9,9 @@ import { copyToClipboard } from '../../utils';
|
|
|
9
9
|
|
|
10
10
|
# All Icons
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
Browse the icons below. Click any icon to copy its name to your clipboard.
|
|
13
13
|
|
|
14
|
-
Default subset is `solid` (prefix `fas`) and
|
|
14
|
+
Default subset is `solid` (prefix `fas`) and can be used without a prefix. Other subsets must be prefixed (`['prefix', 'iconName']`).
|
|
15
15
|
|
|
16
16
|
<div className="tw-grid tw-w-full tw-grid-cols-8 tw-gap-8 tw-pt-12">
|
|
17
17
|
{[...new Set(all)].map(({ prefix, iconName }) => (
|