inFakt Styleguide

Ikony z placeholder

Plik _icons-svg.scss zawiera placeholdery ikon zakodowanych w base64. W miejscach na stronie, gdzie potrzebujemy, aby ikona pojawiała się natychmiast używamy placeholderów. W pozostałych miejscach stosujemy standardowe odniesienie do pliku. Stosujemy wyłącznie ikony w formacie .svg

Używanie ikon – zasady ogólne

  • Ikony buttonów muszą na początku nazwy placeholdera zawierać słowo ‚icon’.
  • Nazwa ikony składa się z następujacych członów: %icon-nazwa--kolor-rozmiar. Przykład: %icon-search--ice-24. Słowo ice w tym przypadku jest nazwą zmiennej, w której przechowywany jest kolor.
  • Czasami mamy wersje ikon o grubości kreski 1px, a czasami 2px. W przypadku gdy są 2 takie same ikony różniące się grubością, to warto w nazwie dodać taką inforamcję np.: thick--marine-16-1, czyli ikona o nazwie thick, kolorze marine, wielkości 16x16px i grubości 1px.
Ikony wstawiane za pomocą placeholdera
Ikony scss placeholder
%icon-thick--white-16
%icon-thick--white-24
%icon-search--white-16
%icon-search--white-24
%icon-arrow-right--white-16
%icon-arrow-right--white-24
%icon-add--white-16
%icon-add--white-24
%icon-cross--white-12
%icon-thick-blue-light
%icon-add--marine-16
%icon-add--marine-24
%icon-add--marine-16-1
%icon-arrow-right--blue
%icon-right--blue-hover
%icon-thick--marine-16-1
%icon-trash--marine-16
%icon-send-message--marine-16
%icon-print--marine-16
%icon-history-invoices--marine-16
%icon-history-correspondence--marine-16
%icon-switch-app-24
%icon-switch-app--ice-24
%icon-envelope-24
%icon-envelope--ice-24
%icon-progress
%icon-progress-blank
%icon-search--ice-24
%icon-search-24
%icon-search--grey-16
%icon-search--focus-16
%icon-signup-24
%icon-signup--ice-24
%icon-signup--grey-24
%icon-thick--green-24
%icon-thick-checkbox
%icon-change-name--marine-16
%icon-delete--grey-16
%icon-delete--red-16
%icon-menu-toggle
%icon-thick-blue
%icon-thick-checkbox
%icon-hide-options
%icon-extend-options
%icon-delete-24x24
%icon-edit-24x24
%icon-calendar_arrow_left_16
%icon-calendar_arrow_right_16
%icon-thick--marine-light
%icon-edit--marine-16
%icon-cross--red-16
%icon-cross-marine
%icon-files--ice-24
%icon-files--ice-24-hover
%icon-phone--marine
%icon-arrow-left--marine-16
%icon-arrow-down
%icon-arrow-down-marine
%tooltip-arrow-default
%icon-chat
@icon-stats--grey-16
%icon-menu-arrow-ccd6dd-17x14
%icon-file-init-68
%icon-file-drop-68
%icon-file-progress-68
%icon-file-accept-68
%icon-file-fail-68

Ikony z plików

Ikony osadzane bezpośrednio z pliku
Ikony Nazwa pliku
add-slim--marine-24
arrow--grey-big
arrow-down--marine 16-1
arrow-right--green-48-38
arrow-right--grey-16
arrow-right--grey-24
arrow-right--grey-small
arrow-right--marine-16
arrow-right--marine-24
arrow-sort-16
arrow-table-top--grey-16
attachment--grey
captcha-refresh
change-use-24
change-user-profil-30
chat--marine-30
close-alert--blue
close-alert--gold
close-alert--green
close-alert--red
delete--grey-16
delete--ice-16
envelope-30
error--red-38
history-hide--marine-16
history-show--marine-16
icon-book--blue
icon-book--green
icon-calendar-green-30x30
icon-company-chat-white-48x48
icon-company-registration-white-48x48
icon-company-talk-white-48x48
icon-discount-white-48x48
icon-ok-grey-16x16
icon-ok-white-16x16
icon-originating-application-white-48x48
icon-people-list-white-48x48
icon-prepare-documents-white-48x48
icon-warn-white-16x16
info--marine-38
menu-help-25
menu-logout-20
menu-payment-25
menu-settings-24
modal-close--white-16
open-new-window-24
phone--marine-30
          
phone--marine-48
printer-marine-30
question--marine-16
search--marine-24
stats--grey-16
status-not-ok
status-ok
success--green-38
test-lupa
thick-marine-30
warrning--gold-38