Jøkul · Ikoner
Pakke: @fremtind/jokul
Installasjon: Se relevant guide
SearchIcon er et Jøkul-ikon som brukeren skal forstå at kontrollen søker i innhold eller åpner en søkeflate.
Eksporten `SearchIcon` bygger på Jøkul sin felles Icon-wrapper og bruker materialsymbol-fonten som følger med ikonstilene.
Denne eksporten rendres som nøytral linjevariant som standard, så docs-siden viser den slik komponenter normalt vil møte den i praksis.
Eksempel
SearchIcon · nøytral linjevariant som standard
Skalerer med typografien
Brødtekst
Mellomtittel
Større fremheving
I kontekst
Søk i dokumentasjonen
Kode
React · tsximport "@fremtind/jokul/styles/core/core.css";
import "@fremtind/jokul/styles/components/icon/icon.min.css";
import "@fremtind/jokul/styles/fonts/webfonts.min.css";
import { SearchIcon } from "@fremtind/jokul/icon";
export function Example() {
return (
<span>
<SearchIcon aria-hidden="true" />
<span>Søk i dokumentasjonen</span>
</span>
);
}
HTML · html<span>
<span class="jkl-icon" aria-hidden="true"></span>
<span>Søk i dokumentasjonen</span>
</span>
Når du skal bruke SearchIcon
SearchIcon fungerer best når brukeren skal forstå at kontrollen søker i innhold eller åpner en søkeflate.
Handlingsikoner bør brukes varsomt og bare når formen er allment forstått i konteksten eller støttes av synlig tekst.
- Bruk ikon og tekst sammen når handlingen ikke er helt selvforklarende.
- Hold samme ikon for samme type handling på tvers av liknende flater og mønstre.
Tilgjengelighet
Ikonbaserte handlinger må alltid ha et tilgjengelig navn via synlig tekst eller `aria-label` på kontrollen rundt.
Dekorative handlingsikoner bør skjules fra skjermlesere når teksten ved siden av allerede beskriver handlingen.
- Skjul dekorative ikoner med `aria-hidden="true"` når teksten rundt allerede forklarer meningen.
- Hvis ikonet brukes alene i en knapp eller lenke, må kontrollen få et tydelig tilgjengelig navn.
Ikonkontrakt
| Felt | Verdi | Notat |
| Eksport | SearchIcon | Navnet du importerer fra `@fremtind/jokul/icon`. |
| Import | @fremtind/jokul/icon | Jøkul samler ikonene i samme ikoninngang som den felles wrapperen. |
| Standardstil | nøytral linjevariant som standard | Det er denne varianten komponentene normalt bruker som utgangspunkt. |
| Typisk bruk | action | brukeren skal forstå at kontrollen søker i innhold eller åpner en søkeflate |