diff --git a/packages/foundations/docs/CustomIcons.md b/packages/foundations/docs/CustomIcons.md index bc35bab74e9..383f845ef17 100644 --- a/packages/foundations/docs/CustomIcons.md +++ b/packages/foundations/docs/CustomIcons.md @@ -2,70 +2,7 @@ If you have custom icons and want to use them for [foundations](https://www.npmjs.com/package/@db-ui/foundations) and/or in [components](https://www.npmjs.com/package/@db-ui/components), you need to generate a **woff2** file. -## Generate - -For this run: - -```shell -npx @db-ui/gif --src ./my-path-to/icons --fontName my-name -``` - -We search for all `**/*.svg` files inside the `src` directory and create a new icon font with the provided name. You can preview all generated icons here: `./my-path-to/icons/fonts/all/index.html`. - -> **_NOTE:_** We use four different sizes for components (16, 20, 24, 32) to show more or less details. You can do the same by providing another file with a size suffix for example `icon_file_name_16.svg`. - -For more information run: - -```shell -npx @db-ui/gif --help -``` - -## How to use - -In your app you need to include some of the generated files: - -```html -./my-path-to/icons/fonts/my-name.woff2 ./my-path-to/icons/fonts/font-face.css -``` - -> **_NOTE:_** In case you put the files in a separate folder of your `public` directory be aware to adopt the path in your generated `font-face.css` file: `url("/{YOUR_FOLDER}}/my-name.woff2?t=1698750286189") format("woff2");` - -Now you can use your icons with your `font-family: my-name`, e.g.: - -```html - -icon_file_name -``` - -### SCSS - -When using **scss** you can also use `@forward` to include the generated files: - -```scss -@forward "public/font-face"; -``` - -### data-icon - -If you like to use a custom icon in one of our components you can do it by overwriting the default font-family like this: - -```html - -

Test

- - -

Test

-``` - -### CSS - -You can overwrite custom-icons for our components with CSS as well: - -```css -.db-button { - --db-icon-font-family: "my-name"; -} -``` +Check out the `icon-font-tools` [documentation](https://github.com/db-ui/icon-font-tools/blob/feat-cosmiconfig/docs/GenerateIconFonts.md) to generate a **woff2** file. ## Foundation Developer