Kako sem naredil sistem ikon iz lastnosti po meri CSS

SVG je najboljši format za ikone na spletnem mestu o tem ni dvoma. Omogoča vam, da imate ostre ikone ne glede na gostoto slikovnih pik na zaslonu, lahko spremenite sloge SVG pri lebdenju in lahko celo animirate ikone s CSS ali JavaScript.

Obstaja veliko načinov za vključitev SVG na stran in vsaka tehnika ima svoje prednosti in slabosti. Zadnjih nekaj let uporabljam funkcijo Sass za neposredni uvoz svojih ikon v svoj CSS in se izogibam temu, da bi pokvaril svojo oznako HTML.

Imam seznam Sass z vsemi izvornimi kodami svojih ikon. Vsaka ikona je nato kodirana v podatkovni URI s funkcijo Sass in shranjena v a lastnina po meri v korenu strani.

TL; DR

Tukaj imam za vas funkcijo Sass, ki ustvari knjižnico ikon SVG neposredno v vašem CSS.

Izvorna koda SVG je prevedena s funkcijo Sass, ki jih kodira v URI podatkov in nato shrani ikone v lastnostih po meri CSS. Nato lahko uporabite katero koli ikono kjer koli v vašem CSS, kot da bi bila zunanja slika.

To je primer, vzet neposredno iz kode mojega osebnega mesta:

.c-filters__summary h2:after {
  content: var(--svg-down-arrow);
  position: relative;
  top: 2px;
  margin-left: auto;
  animation: closeSummary .25s ease-out;
}

Predstavitev

Struktura Sass

/* All the icons source codes */
$svg-icons: (
  burger: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0...'
);

/* Sass function to encode the icons */
@function svg($name) {
  @return url('data:image/svg+xml, #{$encodedSVG} ');
}

/* Store each icon into a custom property */
:root {
  @each $name, $code in $svg-icons {
    --svg-#{$name}: #{svg($name)};
  }
}

/* Append a burger icon in my button */
.menu::after {
  content: var(--svg-burger);
}		

Ta tehnika ima prednosti in slabosti, zato jih upoštevajte, preden to rešitev implementirate v svoj projekt:

Prednosti

• Za datoteke SVG ni zahtev HTTP.
• Vse ikone so shranjene na enem mestu.
• Če morate posodobiti ikono, vam ni treba pregledati vsake datoteke predloge HTML.
• Ikone so predpomnjene skupaj z vašim CSS.
• Izvorno kodo ikon lahko uredite ročno.
• Ne onesnažuje vašega HTML-ja z dodajanjem dodatnih oznak.
• Še vedno lahko spremenite barvo ali nekatere vidike ikone s CSS.

Proti

• S CSS ne morete animirati ali posodobiti določenega dela SVG.
• Več kot imate ikon, težja bo vaša prevedena datoteka CSS.

To tehniko večinoma uporabljam za ikone kot za logotipe ali ilustracije. Kodiran SVG bo vedno težji od izvirne datoteke, zato svoj zapleteni SVG še vedno naložim z zunanjo datoteko bodisi z ali v mojem CSS z url(path/to/file.svg).

Kodiranje SVG v podatkovni URI

Kodiranje SVG kot podatkovnih URI-jev ni novost. Pravzaprav Oseba Chris Coyier je napisala objavo o tem pred več kot 10 leti, da bi razložili, kako uporabljati to tehniko in zakaj bi jo morali (ali ne bi smeli) uporabljati.

Obstajata dva načina za uporabo SVG v vašem CSS s podatki URI:

• Kot zunanja slika (z uporabo background-image,mejna slika,seznam-slog-slika,…)
• Kot vsebina psevdo elementa (npr ::before or ::after)

Tukaj je osnovni primer, ki prikazuje, kako uporabljati ti dve metodi:

Glavna težava pri tej posebni izvedbi je, da morate SVG pretvoriti ročno vsakič, ko potrebujete novo ikono, in ni prav prijetno imeti ta dolg niz neberljive kode v vašem CSS.

Tukaj Sass priskoči na pomoč!

Uporaba funkcije Sass

Z uporabo Sassa si lahko poenostavimo življenje tako, da kopiramo izvorno kodo našega SVG neposredno v našo kodno zbirko in pustimo Sassu, da jih pravilno kodira, da se izognemo kakršni koli napaki brskalnika.

Ta rešitev se večinoma zgleduje po obstoječi funkciji, ki jo je razvil Threespot Media in je na voljo v njihovo skladišče.

Tukaj so štirje koraki te tehnike:

• Ustvarite spremenljivko z vsemi navedenimi ikonami SVG.
• Navedite vse znake, ki jih je treba preskočiti za podatkovni URI.
• Implementirajte funkcijo za kodiranje datotek SVG v format URI podatkov.
• Uporabite svojo funkcijo v svoji kodi.

1. Seznam ikon

/**
* Add all the icons of your project in this Sass list
*/
$svg-icons: (
  burger: ''
);

2. Seznam ubežnih znakov

/**
* Characters to escape from SVGs
* This list allows you to have inline CSS in your SVG code as well
*/
$fs-escape-chars: (
  ' ': '%20',
  ''': '%22',
  '"': '%27',
  '#': '%23',
  '/': '%2F',
  ':': '%3A',
  '(': '%28',
  ')': '%29',
  '%': '%25',
  '': '%3E',
  '': '%5C',
  '^': '%5E',
  '{': '%7B',
  '|': '%7C',
  '}': '%7D',
);

3. Funkcija kodiranja

/**
* You can call this function by using `svg(nameOfTheSVG)`
*/
@function svg($name) {
  // Check if icon exists
  @if not map-has-key($svg-icons, $name) {
    @error 'icon “#{$name}” does not exists in $svg-icons map';
    @return false;
  }

  // Get icon data
  $icon-map: map-get($svg-icons, $name);

  $escaped-string: '';
  $unquote-icon: unquote($icon-map);
  // Loop through each character in string
  @for $i from 1 through str-length($unquote-icon) {
    $char: str-slice($unquote-icon, $i, $i);

    // Check if character is in symbol map
    $char-lookup: map-get($fs-escape-chars, $char);

    // If it is, use escaped version
    @if $char-lookup != null {
        $char: $char-lookup;
    }

    // Append character to escaped string
    $escaped-string: $escaped-string + $char;
  }

  // Return inline SVG data
  @return url('data:image/svg+xml, #{$escaped-string} ');
}		

4. Dodajte SVG na svojo stran

button {
  &::after {
    /* Import inline SVG */
    content: svg(burger);
  }
}

Če ste sledili tem korakom, bi moral Sass pravilno prevesti vašo kodo in izpisati naslednje:

button::after {
  content: url("data:image/svg+xml, %3Csvg%20xmlns=%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox=%270%200%2024.8%2018.92%27%20width=%2724.8%27%20height=%2718.92%27%3E%3Cpath%20d=%27M23.8,9.46H1m22.8,8.46H1M23.8,1H1%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-linecap=%27round%27%20stroke-width=%272%27%2F%3E%3C%2Fsvg%3E ");
}		

Lastnosti po meri

Zdaj implementiran Sass svg() funkcija deluje odlično. Toda njegova največja napaka je, da bo ikona, ki je potrebna na več mestih v vaši kodi, podvojena in bi lahko močno povečala težo vaše prevedene datoteke CSS!

Da bi se temu izognili, lahko vse naše ikone shranimo v spremenljivke CSS in uporabite sklic na spremenljivko, namesto da vsakič izpišete kodirani URI.

Ohranili bomo isto kodo, kot smo jo imeli prej, vendar bomo tokrat najprej izpisali vse ikone s seznama Sass v koren naše spletne strani:

/**
  * Convert all icons into custom properties
  * They will be available to any HTML tag since they are attached to the :root
  */

:root {
  @each $name, $code in $svg-icons {
    --svg-#{$name}: #{svg($name)};
  }
}

Zdaj, namesto da pokličete svg() vsakič, ko potrebujemo ikono, moramo uporabiti spremenljivko, ki je bila ustvarjena z --svg predpono.

button::after {
  /* Import inline SVG */
  content: var(--svg-burger);
}

Optimizacija vaših datotek SVG

Ta tehnika ne zagotavlja nobene optimizacije izvorne kode SVG, ki jo uporabljate. Prepričajte se, da ne puščate nepotrebne kode; sicer bodo prav tako kodirani in bodo povečali velikost vaše datoteke CSS.

Lahko preverite ta odličen seznam orodij in informacij o tem, kako pravilno optimizirati svoj SVG. Moje najljubše orodje je orodje Jakea Archibalda SVGOMG — preprosto povlecite svojo datoteko tja in kopirajte izpisano kodo.

Bonus: Posodabljanje ikone ob lebdenju

S to tehniko s CSS ne moremo izbrati določenih delov SVG. Na primer, ni mogoče spremeniti fill barva ikone, ko uporabnik premakne miškin kazalec na gumb. Vendar pa obstaja nekaj trikov, ki jih lahko uporabimo s CSS, da še vedno lahko spremenimo videz naše ikone.

Na primer, če imate črno ikono in želite, da je ob lebdenju bela, lahko uporabite invert() Filter CSS. Igramo se lahko tudi z hue-rotate() filter.

To je to!

Upam, da vam bo ta majhna pomočna funkcija prišla prav pri vaših projektih. Povejte mi, kaj mislite o pristopu – zanimalo bi me, kako bi to izboljšali ali se lotili drugače!