Știai că Bootstrap 5 îți pune la dispoziție o bibliotecă cu peste 1600 de pictograme SVG gratuite?

Pictogramele Bootstrap 5 sunt SVG-uri ca să poată fi scalate rapid și simplu și să poată fi modelate cu CSS. Le poți include în proiectele tale după cum dorești cu sau fără Bootstrap. Sunt open source sub licența MIT ceea ce înseamnă că le poți descărca, utiliza și personaliza după cum ai nevoie.

Cum poți personaliza simplu o pictogramă Bootstrap 5 în format SVG

1. Accesezi link-ul https://icons.getbootstrap.com.

2. Alegi o pictogramă din bibliotecă. În imaginea de mai jos am ales o pictogramă la întâmplare.

3. Se copiază codul HTML prin click pe “Copy to clipboard” pentru codul corespunzător pictogramei alese.

4. „Paste” în locul unde dorești să salvezi pictograma (în exemplul nostru „paste” la codul de mai jos).


<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-alarm" viewBox="0 0 16 16">
<path d="M8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z"/>
<path d="M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1h-3zm1.038 3.018a6.093 6.093 0 0 1 .924 0 6 6 0 1 1-.924 0zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1z""/>
</svg>


Obținem această pictogramă cu lățimea de 16px, înălțimea de 16px iar culoarea implicită este culoarea neagră.

Dacă personalizăm codul după exemplul de mai jos:


<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="red" class="bi bi-alarm" viewBox="0 0 16 16">
<path d="M8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z"/>
<path d="M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1h-3zm1.038 3.018a6.093 6.093 0 0 1 .924 0 6 6 0 1 1-.924 0zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1z""/>
</svg>


Obținem o pictogramă cu lățimea de 64px, înălțimea de 64px, de culoare roșie.

Bootstrap 5 îți oferă o întreagă bibliotecă de pictograme SVG ce le poți personaliza după bunul plac.

Informații complete despre cum poți personaliza pictograme SVG – Bootstrap 5, poți găsi pe pagina de documentație a dezvoltatorului.