Jak używać niestandardowych ikon w materiale kątowym

Jeśli chcesz używać niestandardowych ikon w Angular Material, musisz wykonać kilka kroków. Najpierw musisz utworzyć własny zestaw ikon. Angular Material ma wbudowany zestaw ikon, ale możesz też tworzyć własne. Gdy masz już swoje ikony, musisz zarejestrować je w Angular Material. Można to zrobić w pliku modułu aplikacji. Po zarejestrowaniu ikon możesz ich używać tak samo, jak wbudowanych ikon. Możesz ich użyć w znacznikach lub uzyskać do nich dostęp programowo. To wszystko, jeśli chodzi o używanie niestandardowych ikon w Angular Material! Wykonując te kroki, możesz łatwo dodawać własne ikony do Angular Material do wykorzystania w swoich aplikacjach.

W tym samouczku użyjemy komponentu >mat-icon> do stworzenia czcionki Material Icons. Komponent będzie używany oprócz obsługi niestandardowej ikony sva. W serwisie GitHub można znaleźć pełny działający kod. Ten post jest przeznaczony dla tych, którzy dopiero uczą się Angular v4.2+. Materiał Angular dla tego samouczka został pierwotnie napisany w Angular 5.2 i Angular 10.1. Ikona, której użyjemy w tym samouczku (przypominająca uśmiechniętą twarz) to ikona nastroju. Oprócz obszernej listy ikon materiałów, witryna Material Design udostępnia różnorodne style ikon , których można używać samodzielnie.

Możemy teraz używać ikony myszy do wyświetlania plików SVG. Wprowadzając etykietę do właściwości wejściowej pliku .html, możesz użyć etykiety ikony , aby określić, do której ikony ma być uzyskiwany dostęp. Adres URL powinien mieć postać https://app.html. Rzućmy okiem na to, co jest obecnie dostępne. Gdy spojrzysz na aplikację w przeglądarce, zauważysz, że niestandardowa ikona ma styl Material. Przeniesienie MatIconRegistry do klasy usługi pomoże utrzymać czystszy kod.

Jak używać ikon Svg w Angular 12?

Aby używać ikon SVG w Angular 12, musisz zainstalować pakiety @angular/material i @angular/material-extensions. Następnie możesz użyć usługi matIconRegistry, aby zarejestrować ikony i dodać je do swoich komponentów.

Możesz zarządzać kodem w Angular2, używając swojego pliku Icon.svg jako swojego saparatu. Ponadto można do tego użyć modułu ng-inline-svg (lub, jeśli to możliwe, innych podobnych podejść). W rezultacie jest to zasadniczo coś pośrodku – będziesz mieć osobne pliki dla każdego typu obrazu, przy czym obrazy będą wstawiane podczas ładowania strony, dzięki czemu będziesz mógł nimi manipulować za pomocą JS/CSS.

Używanie aria-describedby jako części SVG pozwoli użytkownikom niepełnosprawnym na lepsze wrażenia podczas korzystania z Twojej witryny. W rezultacie, opisując swoje ikony za pomocą arii opisanej przez, będziesz mieć pewność, że użytkownicy niepełnosprawni będą mogli zrozumieć, co reprezentują.

Debata o png vs. Ikony SVG

Z drugiej strony kanał alfa można również dodać do pliku SVG. Innymi słowy, ponieważ można je umieścić w przezroczystych obszarach przy zachowaniu odrobiny koloru, ikony SVG są bardziej uniwersalne niż ikony PNG . Wybór pliku, którego chcesz użyć dla swoich ikon, sprowadza się do konkretnego projektu i jego potrzeb.

Jak używać niestandardowych ikon Svg w HTML?

Aby użyć niestandardowych ikon SVG w HTML, musisz dołączyć ścieżkę do pliku ikony w atrybucie href elementu ikony. Ścieżka do pliku powinna być względna w stosunku do katalogu głównego strony. Na przykład, jeśli ikona znajduje się w folderze o nazwie „ikony” w katalogu głównym, ścieżka do pliku będzie miała postać „icons/icon.svg”.

Od czasu wprowadzenia narzędzi online, takich jak Icomoon i Fontello, tworzenie czcionek internetowych stało się znacznie łatwiejsze. Dzięki HTML5 mamy dostęp do znacznie szerszego wachlarza ikon dzięki Scalable Vector Graphics. Jeśli chcesz zapewnić pomoc techniczną dla Explorera 8, istnieje kilka prostych opcji awaryjnych. Identyfikator fragmentu jest wbudowaną właściwością SVG. Możemy odwołać się do fragmentu, jeśli chcemy użyć specyfikacji widoku SVG lub zaadresować tablicę. Ten element jest elementem SVG na podstawie jego identyfikatora >view>. Aby pokazać tylko czarnego konia z tego duszka figury szachowej (z Wikipedii Commons), musisz wykrywać wartości tak, jak na poniższym schemacie.

Używając tagu img do zdefiniowania obrazu, technika ta działa dobrze w przeglądarkach Firefox, Chrome, Safari (komputer) i Opera. Alternatywnie możesz użyć zewnętrznego pliku SVG do utworzenia sprite'ów CSS, jak pokazano na poniższym obrazku. Jest to niezawodna, gotowa do użycia technika produkcji. Przetestowałem to w różnych głównych przeglądarkach (w tym IE8) i działało idealnie. Ikony pojawiają się na ekranie jako znaczniki. Ponownie, Icomoon może być użyty do ręcznego stworzenia kolekcji znaczników symboli lub możesz użyć do tego wtyczki Grunt (google for Grunt SVG merge). Z wyjątkiem IE9, ta metoda może być używana we wszystkich głównych przeglądarkach. Nawet rozwiązanie Jonathana Neala, SVG4everybody, może być użyte do rozwiązania tego problemu.

Jeśli kod źródłowy nie określa żądanego atrybutu szerokości, obraz sva nie jest wyświetlany w przeglądarce Chrome. Jeśli plik SVG nie ma tego atrybutu, przeglądarka powiększy lub zmniejszy obraz.

Jak używać obrazów Svg na swojej stronie internetowej

Możesz wstawiać obrazy SVG bezpośrednio do HTML, używając znacznika svg> /svg>. Dostęp do obrazu SVG można uzyskać w kodzie VS lub preferowanym IDE, kopiując kod i wklejając go w elemencie body dokumentu HTML. Gdyby wszystko poszło gładko, Twoja strona wyglądałaby dokładnie tak, jak ta pokazana tutaj.
Ikony można tworzyć za pomocą obrazów SVG, po prostu wpisując ich nazwę w przeglądarce internetowej. Można w nich osadzić kod HTML i zainstalować ich wersje w pamięci podręcznej. Dowody są również obiecujące na przyszłość. Ikony powinny być tworzone za pomocą plików PNG lub skalowalnych interfejsów graficznych (SVG).

Lista ikon Svg materiałów kątowych

Biblioteka materiałów Angular zapewnia zestaw dobrze przetestowanych i dostępnych komponentów interfejsu użytkownika wielokrotnego użytku, opartych na specyfikacji Google Material Design. Jedną z cech biblioteki jest możliwość używania ikon SVG jako ikon materiałów. Zestaw ikon Angular Material zawiera szeroką gamę ikon, w tym ikony mediów społecznościowych, ikony typów plików i strzałki. Możesz przeglądać pełną listę ikon Angular Material na stronie Material icons.

Ikony mogą być wyświetlane za pomocą komponentu Mat-Ikona materiału kątowego. Główną cechą tego komponentu jest możliwość wyświetlania obrazów przy użyciu czcionek internetowych, takich jak Font-awesome, która wymaga po prostu nazwy wymaganego obrazu. Co dzieje się z ikonami, które nie należą do czcionek internetowych? Czy chcesz wprowadzić zmiany w ikonie (na przykład kolor po najechaniu myszką lub stan przycisku w określonej lokalizacji) w czasie wykonywania? Po otwarciu sekcji konsoli przeglądarki pojawia się następujący błąd. Podczas korzystania z kontekstu adresu URL zasobu używana jest wartość niebezpieczna. Zdefiniowanie adresu URL jako parametru służy do obejścia SecurityTrustResourceUrl, co uniemożliwia atakującemu wstrzyknięcie złośliwego adresu URL, takiego jak ten, patrz oficjalna dokumentacja DomSanitizer.

Później przyjrzymy się lepszej metodzie, ale teraz po prostu umieścimy ją na stronie app.html. Dodaj klasę w znaczniku HTML mat- icon , jak opisano powyżej. Kiedy użytkownik najedzie kursorem na ikonę, kolor obrazu zmienia się w wyniku SCSS. Ikony powinny teraz zmieniać kolory po najechaniu na nie kursorem. W ramach przyszłego postu zajmiemy się ulepszeniem tego i refaktoryzacją, aby umożliwić ładowanie ikon za pomocą usługi.

Jak korzystać z ikon kątowych materiałów

Gdzie mogę znaleźć ikony materiałów kątowych?
Jedyne, co musisz zrobić, to użyć następujących czcionek internetowych Google CSS w swoim kodzie HTML. Ikony materiałów można znaleźć w jednym pliku (42 KB) i mają różne rozmiary, od dużych do małych. Ikony są podzielone na dziesięć różnych kategorii, które można zobaczyć w repozytorium Git. Ikony mogą być również hostowane na własnym serwerze.
Jakie są dobre strony, na których można zobaczyć ikony materiałów?
Zebraliśmy ikony materiałów w repozytorium Git, które zawiera wszystkie udostępniane przez nas formaty.
Jaki jest najlepszy sposób na dostosowanie ikony?
Element class musi zostać dodany do znacznika HTML mat-icon, jak pokazano powyżej. Dodanie SCSS do klasy zmienia kolor ikony za każdym razem, gdy użytkownik najedzie na nią kursorem. Po najechaniu na ikony powinny one teraz zmieniać kolory.

Jak korzystać z ikon kątowych materiałów

Ikony materiałów Angular to pliki SVG, których można używać w aplikacji Angular. Aby użyć ikony, po prostu dodaj klasę ikony do elementu. Na przykład, aby użyć ikony koła-konta, należy dodać do elementu klasę mat-ikona-kółko-konta.

Posiadamy biblioteki materiałów w angular, które można wykorzystać do szybkiego zaprojektowania naszej aplikacji i przypisać do niej znaczniki in build. Biblioteka materiałów zawiera mat-icon, która jest wymagana do wyświetlenia nam ikon. W poniższych sekcjach dowiemy się, jak zainstalować wymagane biblioteki i jak to zaimplementować, aby wyświetlać ikony w naszej aplikacji. Naszą pierwszą usługą jest MatIconRegistry, czyli rejestr, który pozwala nam identyfikować i definiować aliasy dla ikon za pomocą usługi, którą można wstrzykiwać. Ikona jest bardzo prosta w użyciu, ale wymaga zaimportowania tej dyrektywy do projektu lub modułu głównego, w którym zamierzamy ją wyświetlić. Uruchom wyżej wymienione polecenie w wierszu polecenia, aby utworzyć nowy projekt kątowy. Wypróbuj jedno z poniższych poleceń, aby upewnić się, że wszystkie niezbędne biblioteki zostały zainstalowane w naszym projekcie. Jest to szczególnie prawdziwe w przypadku programistów, którzy mogą korzystać z biblioteki i modułu bezpośrednio w naszej aplikacji bez konieczności zajmowania się etapami dodawania biblioteki i modułu do modułu głównego.

Mat-ikona Svg

Mat- icon svg to prosta grafika wektorowa, której można użyć do przedstawienia ikony lub logo. Grafika może być zmieniana bez utraty jakości i może być łatwo edytowana lub zmieniana.

Korzystając z komponentu angular material-mation, możemy wygenerować lokalne pliki SVG. Wstrzykujemy usługę MatIconRegistry oraz DomSanitizer do konstruktora. Funkcja registerIcons() zawiera parametry load i URL, a także prywatną funkcję o nazwie load. Jeśli użyjemy tej odmiany, wystarczy dodać nazwę pliku obrazu. Jeśli używasz łańcucha, funkcja ładowania icon.service jest nieco inna. Nazwa obrazu zostanie wygenerowana przy użyciu indeksu jako klucza nazwy obrazu w funkcji ładowania. Ta usługa musi być teraz aktywowana, gdy aplikacja zaczyna się ładować. O wiele łatwiej jest czytać i utrzymywać kod, ponieważ jest on znacznie bardziej czytelny. Podzieliliśmy obrazy na osobne sekcje i wdrożyliśmy prostszą obsługę.