Artikel mit Schlagwort

Ich stelle mir einen SVG-Sprite so vor:

<svg display="none">
  <symbol id="icon-one"> ... </symbol><symbol>
  </symbol><symbol id="icon-two"> ... </symbol><symbol>
  </symbol><symbol id="icon-three"> ... </symbol><symbol>
</symbol></svg>

Ich war lange ein Fan dieses Ansatzes für Icon-Systeme (sie mit <use></use> nach Bedarf zu verwenden) …

Es gibt viel, was an Gaddafi Rusli’s ICONSVG gefällt.

1. Es stellt Inline-<svg> bereit, was der generell nützlichste Weg ist, sie auszuliefern, und wahrscheinlich der Weg, wie sie sowieso verwendet werden sollten. Jedes Icon ist ein winziges

Icons sind großartig und alles, aber wie uns immer wieder gezeigt wurde, erledigen sie oft nicht den Job allein. Selbst wenn Sie bei der Barrierefreiheitsfunktion gute Arbeit leisten und sicherstellen, dass eine begleitende ...

Dies ist ein großartiger Einblick in barrierefreie SVG-Markup-Muster von Marco Hengstenberg. Hier ist das ideale Beispiel

<button type="button">
  Menu
  <svg class="svg-icon"
     role="img"
     height="10"
     width="10"
     viewBox="0 0 10 10"
     aria-hidden="true"
     focusable="false">
     <path d="m1 7h8v2h-8zm0-3h8v2h-8zm0-3h8v2h-8z"></path>
    </svg>
</button>

• WordPress' neues Standardtheme TwentySeventeen verwendet ein SVG-Icon-System. Es wurde von Sami Keijonen beigesteuert, der etwas Vorerfahrung damit hatte und hier ein wenig darüber geschrieben hat. Das Theme hat Funktionen, die korrekt/zugänglich ausgeben.

Elliot Dahl

Bei Pivotal haben wir ein SVG-Icon-System mit React für unsere Produktsuite erstellt. Dieser Artikel handelt von meinem Ansatz, das SVG-Icon-System mit CSS zu stylen, um es einfach und effektiv zu machen.

Angenommen, Sie arbeiten an einer Website, die ein Icons-System verwendet. Viele Leute, die an der Website arbeiten, interagieren mit dem Icons-System. Designer erstellen neue Icons, sie verändern bestehende, sie haben Ideen, was sie wollen, die …

Ich habe kürzlich an Michael Jacksons und Ryan Florences ReactJS-Schulung teilgenommen. Ich war wirklich aufgeregt, daran teilzunehmen, teilweise, weil ich so viele Fragen zu SVG und React hatte. Es gibt viele Punkte zur Arbeit mit React und …

Ich habe hier schon einiges über das <use></use> von SVG und dessen Verwendung zum Erstellen eines Icon-Systems gesprochen. Die Schönheit von <use></use> ist, dass Sie auf nur einen Teil eines woanders definierten SVG verweisen und nur diesen ...