Kuidas ma tegin CSS-i kohandatud atribuutidest ikoonisüsteemi PlatoBlockchaini andmeluure. Vertikaalne otsing. Ai.

Kuidas ma tegin CSS-i kohandatud omadustest ikoonisüsteemi

Ajatempel: 22. september 2022 11:17

SVG on veebisaidi ikoonide jaoks parim vorming selles pole kahtlust. See võimaldab teil saada teravaid ikoone olenemata ekraani pikslite tihedusest, saate muuta SVG stiile hõljutades ja saate isegi ikoone animeerida CSS-i või JavaScriptiga.

SVG-d lehele lisamiseks on palju võimalusi ning igal tehnikal on oma eelised ja puudused. Viimased paar aastat olen kasutanud Sassi funktsiooni, et importida oma ikoonid otse oma CSS-i ja vältida HTML-i märgistuse sassi ajamist.

Mul on Sassi loend kõigi ikoonide lähtekoodidega. Seejärel kodeeritakse iga ikoon Sassi funktsiooniga andme-URI-sse ja salvestatakse a kohandatud vara lehe juurtes.

TL; DR

Siin on mul teie jaoks Sassi funktsioon, mis loob SVG ikooniteegi otse teie CSS-is.

SVG lähtekood koostatakse funktsiooniga Sass, mis kodeerib need andme-URI-sse ja salvestab seejärel ikoonid CSS-i kohandatud atribuutidesse. Seejärel saate kasutada mis tahes ikooni kõikjal oma CSS-is, nagu oleks see väline pilt.

See on näide otse minu isikliku saidi koodist:

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

Demo

Sass struktuur

/* 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);
}

Sellel tehnikal on nii plusse kui ka miinuseid, seega võtke neid enne selle lahenduse rakendamist oma projektis arvesse:

Plusse

  • SVG-failide jaoks pole HTTP-päringuid.
  • Kõik ikoonid on salvestatud ühes kohas.
  • Kui teil on vaja ikooni värskendada, ei pea te iga HTML-i mallifaili üle vaatama.
  • Ikoonid salvestatakse vahemällu koos teie CSS-iga.
  • Saate ikoonide lähtekoodi käsitsi redigeerida.
  • See ei saasta teie HTML-i täiendava märgistuse lisamisega.
  • CSS-iga saate siiski muuta ikooni värvi või mõnda aspekti.

Miinused

  • CSS-iga ei saa SVG teatud osa animeerida ega värskendada.
  • Mida rohkem ikoone teil on, seda raskem on teie CSS-i kompileeritud fail.

Kasutan seda tehnikat enamasti ikoonide, mitte logode või illustratsioonide jaoks. Kodeeritud SVG on alati raskem kui selle algne fail, nii et laadin oma keerulise SVG ikkagi koos välise failiga või või minu CSS-is koos url(path/to/file.svg).

SVG kodeerimine andmete URI-sse

SVG kodeerimine andmete URI-dena pole uus. Tegelikult Chris Coyier kirjutas postituse rohkem kui 10 aastat tagasi, et selgitada, kuidas seda tehnikat kasutada ja miks peaksite (või ei tohiks) seda kasutada.

Andme-URI-ga CSS-is SVG-d saab kasutada kahel viisil.

  • Välise pildina (kasutades background-image,ääris-pilt,loendi stiilis pilt,…)
  • Pseudoelemendi sisuna (nt ::before or ::after)

Siin on põhinäide, mis näitab, kuidas neid kahte meetodit kasutada.

Selle konkreetse teostuse peamine probleem on see, et iga kord, kui vajate uut ikooni, peate SVG käsitsi teisendama ja see pikk loetamatu koodijada CSS-is ei ole tegelikult meeldiv.

Siin tuleb appi Sass!

Sassi funktsiooni kasutamine

Sassi kasutades saame oma elu lihtsamaks muuta, kopeerides oma SVG lähtekoodi otse oma koodibaasi, lastes Sassil neid korralikult kodeerida, et vältida brauseri vigu.

See lahendus on enamasti inspireeritud olemasolevast funktsioonist, mille on välja töötanud Threespot Media ja mis on saadaval riigis nende hoidla.

Siin on selle tehnika neli sammu:

  • Looge muutuja kõigi loetletud SVG-ikoonidega.
  • Loetlege kõik märgid, mis tuleb andme-URI jaoks vahele jätta.
  • Rakendage funktsioon SVG-de kodeerimiseks andme-URI-vormingusse.
  • Kasutage koodis oma funktsiooni.

1. Ikoonide loend

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

2. Paotavate märkide loend

/**
* 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. Kodeerimisfunktsioon

/**
* 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. Lisage oma lehele SVG

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

Kui olete neid samme järginud, peaks Sass teie koodi õigesti kompileerima ja väljastama järgmise:

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 ");
}

Kohandatud atribuudid

Nüüd juurutatud Sass svg() funktsioon töötab suurepäraselt. Kuid selle suurim viga on see, et ikoon, mida on koodis mitmes kohas vaja, dubleeritakse ja see võib teie kompileeritud CSS-faili kaalu oluliselt suurendada!

Selle vältimiseks saame salvestada kõik oma ikoonid CSS-i muutujad ja kasutage kodeeritud URI iga kord väljastamise asemel viidet muutujale.

Jätame sama koodi, mis meil varem oli, kuid seekord väljastame esmalt kõik Sassi loendi ikoonid oma veebilehe juure:

/**
  * 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)};
  }
}

Nüüd selle asemel, et helistada svg() funktsiooni iga kord, kui vajame ikooni, peame kasutama muutujat, mis loodi --svg eesliide.

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

SVG-de optimeerimine

See meetod ei paku teie kasutatava SVG lähtekoodi optimeerimist. Veenduge, et te ei jätaks tarbetut koodi; vastasel juhul kodeeritakse need samuti ja suurendavad teie CSS-faili suurust.

Te saate vaadata see suurepärane nimekiri tööriistu ja teavet selle kohta, kuidas SVG-d õigesti optimeerida. Minu lemmiktööriist on Jake Archibald's SVGOMG — lihtsalt lohistage oma fail sinna ja kopeerige väljastatud kood.

Boonus: ikooni värskendamine hõljutades

Selle tehnikaga ei saa me CSS-iga valida SVG konkreetseid osi. Näiteks ei saa seda kuidagi muuta fill ikooni värv, kui kasutaja hõljutab nuppu. Kuid on mõned nipid, mida saame CSS-iga kasutada, et saaksime oma ikooni välimust siiski muuta.

Näiteks kui teil on must ikoon ja soovite, et see hõljutaks valgena, võite kasutada invert() CSS-filter. Samuti saame mängida hue-rotate() filter.

See ongi!

Loodan, et see väike abifunktsioon on teie enda projektides kasulik. Andke mulle teada, mida te sellest lähenemisviisist arvate – tahaksin teada, kuidas saaksite seda paremaks muuta või teisiti lahendada!

Ajatempel:

Veel alates CSSi trikid