Komponenta ikonky

10. 11. 2019
0
0
4 min.
Komponenta ikonky

Používáte SVG ikonky?

svg
		<svg>...</svg>
	

A co obrázky?
(obrázky které jsou podobného chování jako ikonky = čtverec o malé velikosti)

svg
		<img src="..." />
	

Jak řešíte jejich velikosti?

Skrze atributy?

html
		<svg width="10" height="10">...</svg>
<img src="..." width="10" height="10" />
	

Nebo CSS kód?

html
		<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.

html
		<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 widthheight 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ářů.

Přihlásit se k odběru novinek

Přihlášení proběhlo úspěšně

Související články

Komentáře

Zatím zde nejsou žádné komentáře.

Přidat nový komentář
Odpovědět na komentář

od: