Používáte SVG ikonky?
<svg>...</svg>
A co obrázky?
(obrázky které jsou podobného chování jako ikonky = čtverec o malé velikosti)
<img src="..." />
Jak řešíte jejich velikosti?
Skrze atributy?
<svg width="10" height="10">...</svg>
<img src="..." width="10" height="10" />
Nebo CSS kód?
<svg class="icon">...</svg>
<img class="icon" src="..." />
<style>
.icon{
width: 10px;
height: 10px;
}
</style>
Kolik CSS kódu pro ikonky vytváříte? Každou ikonku stylizujete samostatně?
Milí čtenáři rád se s vámi dnes podělím o svou komponentu. Jmenuje se icon.
<svg class="icon">...</svg>
<img class="icon" src="..." />
<style>
.icon{
display: inline-block;
flex-shrink: 0;
fill: currentColor;
width: 1em;
height: 1em;
}
</style>
Pojďme to rozebrat postupně. Máme nastavenou width a height vlastnosti na 1em. To znamená, že velikost ikonky se rovná velikost písma rodiče.
Vlastnost display tam definuji pro jistotu, aby se mi s ikonkou lépe pracovalo a lépe centrovalo.
Flex-shrink je tam, protože často pracuji s flexem a chci mít jistotu že se moje ikonka nebude zmenšovat.
A jelikož používám svg ikonky, rád pracuji s vlastnosti fill: currentColor, která barvu ikonky promění v barvu písma.
Pojďme si ukázat jak to celé funguje v praxi.
Objasnění principu
bez jakýchkoliv stylů ikonka bude 16×16 pixelů veliká, protože výchozí velikost písma v prohlížeči je 16px.
Princip použití
ve výchozím stavu nám prohlížeč nabízí 7 velikosti písma (výchozích 16px, h1 až h6).
Pomoci 7 css řádků, jsme vytvořili 7 velikosti.. to není špatné, ale pořád to může být lepší…
Používáte Bootstrap? Protože v kombinaci právě s tímto frameworkem naše icon komponenta přináší dokonalý smysl. Chcete se mrknout co všechno můžeme pomoci icon vyskládat? Uveďme si pár ukázek.
V ukázkové komponentě jsem použil jak ikonku tak i obrázek pro lepší představu o možnostech použití.
Jedna 7 řádková komponenta a tolik možnosti, není to špatné, že 🙂
Jak ikonky řešíte vy, pište do komentářů.
