From a3dc7a694f9f2d897d4b18bc339058d0df06a4a3 Mon Sep 17 00:00:00 2001 From: mkrause Date: Wed, 20 Nov 2024 14:48:50 +0100 Subject: [PATCH] Update README --- README.md | 40 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/README.md b/README.md index 1eef647..b8d90f4 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,7 @@ +[![npm](https://img.shields.io/npm/v/@fortanix/baklava.svg?style=flat)](https://www.npmjs.com/package/@fortanix/baklava) +[![CI](https://github.com/fortanix/baklava/actions/workflows/ci.yml/badge.svg)](https://github.com/fortanix/@fortanix/baklava/actions) + # Fortanix Baklava Design System This repository contains the Baklava design system used to build [Fortanix](https://fortanix.com) products. @@ -6,6 +9,43 @@ This repository contains the Baklava design system used to build [Fortanix](http You can find the latest Storybook documentation [here](https://fortanix.github.io/baklava). +## Usage + +Installation: + +```sh +npm install --save @fortanix/baklava +``` + +To import a component: + +```typescript +import { Button } from '@fortanix/baklava'; +``` + +The package automatically includes CSS through Sass (`.scss`) imports. However, this assumes that you have set up your +project in such a way that `.scss` imports (as well as assets like images and fonts) are handled. If you're using vite, +this will be supported out of the box. Otherwise, you may need to configure your bundler accordingly. + +Icons are loaded through SVG sprites. This requires some additional setup. If you're using vite, install the +`vite-plugin-svg-icons` plugin: + +```sh +npm install --save vite-plugin-svg-icons +``` + +Then, add the following to the `plugins` array in your vite config: + +``` +createSvgIconsPlugin({ + iconDirs: [path.resolve(__dirname, 'node_modules/@fortanix/baklava/src/assets/icons')], + symbolId: 'baklava-icon-[name]', + inject: 'body-last', + customDomId: 'baklava-icon-sprite', +}), +``` + + ## Contributing We gratefully accept bug reports and contributions from the community.