Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(docs): Add inline-mode instructions to docs. #331

Merged
merged 1 commit into from
Nov 12, 2024
Merged

chore(docs): Add inline-mode instructions to docs. #331

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 7 additions & 9 deletions lib/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
<script
async
src="https://static.nrk.no/core-icons/major/14/core-icons-iife.js"
></script>
<script async src="https://static.nrk.no/core-icons/major/14/core-icons-iife.js"></script>
```

Linking to `/latest/` is recommended only for prototyping.

```html
<script
async
src="https://static.nrk.no/core-icons/latest/core-icons-iife.js"
></script>
<script async src="https://static.nrk.no/core-icons/latest/core-icons-iife.js"></script>
```

### Using Android
Expand Down Expand Up @@ -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`.
Expand All @@ -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:
Expand Down
Loading