Komponenta ikonky

  • 10.11.2019
  • 0
  • CSS, HTML, SVG

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
<svg width="10" height="10">...</svg>

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.

Živá ukázka na codepenu se načítá

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.

Živá ukázka na codepenu se načítá

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

Komentáře

Přidat nový komentář

Všechny komentáře musí projít schvalovacím procesem.
Slibuji, že vámi uvedený email poslouží výhradně pro upozornění v rámci diskuze.

Děkuji za váš komentář. Po jeho schválení se zde zobrazí.