rk-designsystem 1.1.33 → 1.1.35
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 +58 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
## Live Storybook URL
|
|
4
4
|
|
|
5
|
-
[https://norwegianredcross.github.io/DesignSystem/storybook/](https://norwegianredcross.github.io/DesignSystem/storybook/)
|
|
5
|
+
[https://norwegianredcross.github.io/DesignSystem/storybook/?path=/docs/welcome--docs](https://norwegianredcross.github.io/DesignSystem/storybook/?path=/docs/welcome--docs)
|
|
6
6
|
|
|
7
7
|
## Overview
|
|
8
8
|
|
|
@@ -247,3 +247,60 @@ Your Storybook file is the official documentation. It must be clear and comprehe
|
|
|
247
247
|
|
|
248
248
|
4. **Ready for Review:** When development is complete and all automated checks are passing, mark the PR as "Ready for review" and request a review from the design system maintainers.
|
|
249
249
|
|
|
250
|
+
|
|
251
|
+
## Using NAV/Aksel Icons
|
|
252
|
+
|
|
253
|
+
This library is designed to work seamlessly with the official icon set from NAV/Aksel.
|
|
254
|
+
|
|
255
|
+
### Install
|
|
256
|
+
|
|
257
|
+
```bash
|
|
258
|
+
# npm
|
|
259
|
+
npm install @navikt/aksel-icons
|
|
260
|
+
|
|
261
|
+
# yarn
|
|
262
|
+
yarn add @navikt/aksel-icons
|
|
263
|
+
|
|
264
|
+
# pnpm
|
|
265
|
+
pnpm add @navikt/aksel-icons
|
|
266
|
+
```
|
|
267
|
+
|
|
268
|
+
### Import and usage
|
|
269
|
+
|
|
270
|
+
Icons are exported as named React components. Import only the icons you need (tree‑shakable):
|
|
271
|
+
|
|
272
|
+
```tsx
|
|
273
|
+
import { AirplaneIcon, NewspaperIcon } from '@navikt/aksel-icons';
|
|
274
|
+
import { Button, Tag } from 'rk-designsystem';
|
|
275
|
+
|
|
276
|
+
export function IconsExample() {
|
|
277
|
+
return (
|
|
278
|
+
<div style={{ display: 'flex', gap: 12 }}>
|
|
279
|
+
{/* Icon + text: hide icon from AT */}
|
|
280
|
+
<Button>
|
|
281
|
+
<AirplaneIcon aria-hidden style={{ marginRight: 'var(--ds-spacing-1, 4px)' }} />
|
|
282
|
+
Fly
|
|
283
|
+
</Button>
|
|
284
|
+
|
|
285
|
+
{/* Icon inside Tag */}
|
|
286
|
+
<Tag data-color="info">
|
|
287
|
+
<span style={{ display: 'inline-flex', alignItems: 'center' }}>
|
|
288
|
+
<NewspaperIcon aria-hidden style={{ marginRight: 'var(--ds-spacing-1, 4px)' }} />
|
|
289
|
+
Ny
|
|
290
|
+
</span>
|
|
291
|
+
</Tag>
|
|
292
|
+
</div>
|
|
293
|
+
);
|
|
294
|
+
}
|
|
295
|
+
```
|
|
296
|
+
|
|
297
|
+
### Accessibility guidance
|
|
298
|
+
|
|
299
|
+
- Icon + visible text: set `aria-hidden` on the icon so screen readers don’t announce it twice.
|
|
300
|
+
- Icon‑only triggers (e.g., a button): add a descriptive `aria-label` to the trigger, keep the icon `aria-hidden`.
|
|
301
|
+
- Color: icons inherit `currentColor`; use the component’s variant/color to control it (e.g., button variants, tag colors).
|
|
302
|
+
- Size: set `fontSize` (e.g., `fontSize="1.25rem"`) or inline style (e.g., `style={{ fontSize: '1.25rem' }}`).
|
|
303
|
+
|
|
304
|
+
### Performance
|
|
305
|
+
|
|
306
|
+
Use named imports from `@navikt/aksel-icons` to keep bundles small—unused icons are tree‑shaken by modern bundlers.
|