From 938d786282003d4d8c3c16d64cb789abc3ae7b62 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stian=20Veum=20M=C3=B8llersen?= Date: Tue, 12 Nov 2024 13:18:37 +0100 Subject: [PATCH] chore(docs): Add inline-mode instructions to docs. Fixes #315 --- lib/readme.md | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/lib/readme.md b/lib/readme.md index a1bb74a4..299e3c94 100644 --- a/lib/readme.md +++ b/lib/readme.md @@ -141,19 +141,13 @@ We host the following scripts for use in the browser on our cdn For stability, please link to the appropriate major version ```html - + ``` Linking to `/latest/` is recommended only for prototyping. ```html - + ``` ### Using Android @@ -265,7 +259,6 @@ fun NrkIcon.asDrawable(context: Context): Drawable? { } ``` - ## Scaling Since logos do not have consistent dimensions, `@nrk/core-icons` provides scaling based on `font-size`. @@ -278,6 +271,11 @@ Scale the icons/logos by using font sizes divisible with `16` for sharpest rende Note: correct width/height in `em` for each icon is automatically provided by `@nrk/core-icons`. For browser/iife scripts, you can get the correct HTML markup from the `Copy HTML` button in the hover-menu for each [icon](#browse-icons) or [logo](#browse-logos) in their respective preview-sections above. +## Icons in text + +To use core-icons mixed in with text in `inline` mode, ensure that the icon is sized such that it's dimensions are equal to the `line-height`. You can then use `vertical-align` (`top`/`bottom`) works nicely to align the icon with the text. +If there are any visual adjustments needed for the icon to be visually aligned the proper way, please file an [issue](https://github.com/nrkno/core-icons/issues/new) with the icon-name and a screenshot of the issue. + ## Accessibility Modern versions of assistive technologies will announce SVG content, but there is still a lot of differences between browsers. To avoid confusion, use the following conventions: