Cara Menggunakan Ikon Kustom Dalam Bahan Sudut

Jika Anda ingin menggunakan ikon khusus di Angular Material, ada beberapa langkah yang perlu Anda ambil. Pertama, Anda harus membuat kumpulan ikon Anda sendiri. Angular Material hadir dengan seperangkat ikon bawaan, tetapi Anda juga dapat membuatnya sendiri. Setelah Anda memiliki ikon, Anda harus mendaftarkannya ke Bahan Angular. Ini dapat dilakukan di file modul aplikasi Anda. Setelah ikon Anda terdaftar, Anda dapat menggunakannya seperti ikon bawaan. Anda dapat menggunakannya di markup Anda, atau Anda dapat mengaksesnya secara terprogram. Itu semua yang ada untuk menggunakan ikon khusus di Bahan Angular! Dengan mengikuti langkah-langkah ini, Anda dapat dengan mudah menambahkan ikon Anda sendiri ke Bahan Angular untuk digunakan dalam aplikasi Anda.

Dalam tutorial ini, kita akan menggunakan komponen >mat-icon> untuk membuat font Material Icons. Komponen tersebut akan digunakan selain untuk mendukung ikon sva khusus. Di GitHub, Anda dapat menemukan kode lengkap yang berfungsi. Posting ini untuk mereka yang hanya mempelajari Angular v4.2+. Bahan Angular untuk tutorial ini awalnya ditulis dalam Angular 5.2 dan Angular 10.1. Ikon yang akan kita gunakan dalam tutorial ini (yang menyerupai wajah tersenyum) adalah ikon mood. Selain daftar lengkap ikon Material, situs web Desain Material menyediakan berbagai gaya ikon yang dapat digunakan sendiri.

Kita sekarang dapat menggunakan ikon mouse untuk menampilkan SVG. Dengan memasukkan label ke properti input file a.html, Anda dapat menggunakan label ikon untuk menentukan ikon mana yang diakses. URL harus https://app.html. Mari kita lihat apa yang tersedia saat ini. Saat Anda melihat aplikasi di browser Anda, Anda akan melihat bahwa ikon khusus diberi gaya di Material. Memindahkan MatIconRegistry ke kelas layanan akan membantu mempertahankan dan membersihkan kode.

Bagaimana Saya Menggunakan Ikon Svg Di Angular 12?

Untuk menggunakan ikon SVG di Angular 12, Anda perlu menginstal paket @angular/material dan @angular/material-extensions. Anda kemudian dapat menggunakan layanan matIconRegistry untuk mendaftarkan ikon dan menambahkannya ke komponen Anda.

Anda dapat mengelola kode di Angular2 dengan menggunakan file Icon.svg Anda sebagai saparate Anda. Selain itu, modul ng-inline-svg (atau, jika memungkinkan, pendekatan serupa lainnya) dapat digunakan untuk melakukan ini. Akibatnya, pada dasarnya ada sesuatu di tengah – Anda akan memiliki file terpisah untuk setiap jenis gambar, dengan gambar menjadi sebaris saat halaman dimuat sehingga Anda dapat memanipulasinya menggunakan JS/CSS.

Menggunakan aria-describedby sebagai bagian dari SVG Anda akan memungkinkan pengguna difabel memiliki pengalaman yang lebih baik saat menggunakan situs web Anda. Akibatnya, saat Anda mendeskripsikan ikon Anda dengan aria-described by, Anda akan dapat memastikan bahwa pengguna penyandang disabilitas dapat memahami apa yang mereka wakili.

Perdebatan Png Vs. Ikon Svg

Di sisi lain, saluran alfa juga dapat ditambahkan ke file SVG. Dengan kata lain, karena dapat disertakan dalam area transparan sambil mempertahankan sedikit warna, ikon SVG lebih fleksibel daripada ikon PNG . Pilihan file mana yang akan digunakan untuk ikon Anda tergantung pada proyek spesifik Anda dan kebutuhannya.

Bagaimana Saya Menggunakan Ikon Svg Kustom Di Html?

Untuk menggunakan ikon SVG khusus dalam HTML, Anda perlu menyertakan jalur file ikon di atribut href elemen ikon. Jalur file harus relatif terhadap direktori root halaman. Misalnya, jika ikon ada di folder bernama "icons" di direktori root, jalur filenya adalah "icons/icon.svg".

Sejak pengenalan alat online seperti Icomoon dan Fontello, font web menjadi lebih mudah dibuat. Dengan HTML5, kami memiliki akses ke berbagai ikon yang lebih luas, berkat Scalable Vector Graphics. Jika Anda ingin memberikan dukungan teknis ke Explorer 8, ada beberapa opsi fallback sederhana. Pengidentifikasi untuk sebuah fragmen adalah properti SVG bawaan. Kita bisa merujuk sebuah fragmen jika kita ingin menggunakan spesifikasi tampilan SVG atau mengalamatkan sebuah array. Elemen ini adalah elemen SVG berdasarkan ID >view>-nya. Untuk hanya menampilkan kuda hitam dari sprite bidak catur ini (dari Wikipedia Commons), Anda harus mendeteksi nilai seperti yang Anda lakukan pada skema di bawah ini.

Menggunakan tag img untuk menentukan gambar, teknik ini bekerja dengan baik dengan Firefox, Chrome, Safari (desktop), dan Opera. Atau, Anda dapat menggunakan file SVG eksternal untuk membuat sprite CSS, seperti yang ditunjukkan pada gambar di bawah. Ini adalah teknik manufaktur yang andal dan siap pakai. Saya mengujinya di berbagai browser utama (termasuk IE8) dan bekerja dengan sempurna. Ikon muncul di layar sebagai tag. Sekali lagi, Icomoon dapat digunakan untuk membuat kumpulan tag simbol secara manual, atau Anda dapat menggunakan beberapa plugin Grunt (google untuk penggabungan SVG Grunt) untuk melakukannya. Kecuali untuk IE9, metode ini dapat digunakan dengan semua browser utama. Bahkan solusi Jonathan Neal, SVG4everybody, dapat digunakan untuk menyelesaikan masalah ini.

Kecuali jika kode sumber menentukan atribut lebar yang diinginkan, gambar sva tidak ditampilkan di browser Chrome. Jika SVG tidak memiliki atribut ini, browser akan memperbesar atau memperkecil gambar.

Cara Menggunakan Gambar Svg Di Halaman Web Anda

Anda dapat menyisipkan gambar SVG langsung ke dalam HTML dengan menggunakan tag svg> /svg>. Gambar SVG dapat diakses dalam kode VS atau IDE pilihan Anda dengan menyalin kode dan menempelkannya di dalam elemen body dokumen HTML Anda. Jika semuanya berjalan lancar, halaman web Anda akan terlihat persis seperti yang ditampilkan di sini.
Ikon dapat dibuat dengan gambar SVG hanya dengan mengetikkan namanya di browser web. HTML dapat disematkan di dalamnya, dan versi yang di-cache dapat diinstal. Buktinya juga menjanjikan untuk masa depan. Ikon harus dibuat dengan PNG atau Scalable Graphic Interfaces (SVGs).

Daftar Ikon Bahan Sudut Svg

Pustaka Material Angular menyediakan sekumpulan komponen UI yang dapat digunakan kembali, teruji dengan baik, dan dapat diakses berdasarkan spesifikasi Desain Material Google. Salah satu fitur perpustakaan adalah kemampuan untuk menggunakan ikon SVG sebagai ikon Material. Kumpulan ikon Bahan Angular mencakup beragam ikon, termasuk ikon media sosial, ikon tipe file , dan panah. Anda dapat menelusuri daftar lengkap ikon Material Angular di situs ikon Material.

Ikon dapat ditampilkan menggunakan komponen Mat-Icon dari Bahan Angular. Fitur utama komponen ini adalah kemampuan untuk menampilkan gambar menggunakan font web seperti Font-awesome, yang hanya memerlukan nama gambar yang Anda perlukan. Apa yang terjadi pada ikon yang tidak termasuk dalam font web? Pada ikon, apakah Anda ingin melakukan perubahan (misalnya, warna pada kursor atau status tombol pada lokasi tertentu) saat dijalankan? Kesalahan berikut muncul setelah Anda membuka bagian konsol browser. Saat menggunakan konteks URL sumber daya, nilai tidak aman digunakan. Menentukan URL sebagai parameter digunakan untuk melewatiSecurityTrustResourceUrl, yang mencegah penyerang menyuntikkan URL berbahaya seperti ini, lihat dokumentasi resmi DomSanitizer.

Kita akan melihat metode yang lebih baik nanti, tetapi saat ini, kita hanya akan meletakkannya di halaman app.html. Tambahkan kelas dalam tag HTML mat- icon seperti dijelaskan di atas. Saat pengguna mengarahkan kursor ke ikon, warna gambar berubah akibat SCSS. Ikon sekarang harus berubah warna saat mengarahkan kursor ke atasnya. Sebagai bagian dari posting mendatang, kami akan mempertimbangkan untuk meningkatkan ini dan memfaktorkan ulang agar ikon dapat dimuat menggunakan layanan.

Cara Menggunakan Ikon Bahan Sudut

Di mana saya dapat menemukan ikon material bersudut?
Satu-satunya hal yang perlu Anda lakukan adalah menggunakan CSS font web Google berikut dalam kode HTML Anda. Ikon material dapat ditemukan dalam satu file (42KB) dan ukurannya bervariasi dari besar hingga kecil. Ikon dibagi menjadi sepuluh kategori berbeda yang dapat Anda lihat di repositori Git. Ikon juga dapat dihosting di server Anda sendiri.
Apa sajakah situs yang bagus untuk melihat ikon material?
Kami telah menyusun ikon Material ke dalam repositori Git, yang menyertakan semua format yang kami sediakan.
Apa cara terbaik untuk menyesuaikan ikon saya?
Elemen kelas harus ditambahkan ke tag HTML mat-icon, seperti yang ditunjukkan di atas. Menambahkan SCSS ke kelas mengubah warna ikon setiap kali pengguna mengarahkannya. Saat mengarahkan kursor ke Ikon, mereka sekarang akan berubah warna.

Cara Menggunakan Ikon Bahan Sudut

Ikon Material Angular adalah SVG yang dapat digunakan dalam aplikasi Angular Anda. Untuk menggunakan ikon, cukup tambahkan kelas ikon ke elemen. Misalnya, untuk menggunakan ikon lingkaran-akun, Anda akan menambahkan kelas-ikon-akun-lingkaran-kelas ke sebuah elemen.

Kami memiliki pustaka materi dalam sudut yang dapat digunakan untuk merancang aplikasi kami dengan cepat dan memiliki tag dalam pembuatan yang ditetapkan untuknya. Pustaka materi berisi ikon-mat, yang diperlukan untuk menampilkan ikon kepada kami. Di bagian berikut, kita akan mempelajari cara menginstal pustaka yang diperlukan dan cara mengimplementasikannya untuk menampilkan ikon di aplikasi kita. Layanan pertama kami adalah MatIconRegistry, yang merupakan registri yang memungkinkan kami mengidentifikasi dan menentukan alias untuk ikon menggunakan layanan yang dapat disuntikkan. Ikon ini sangat mudah digunakan, tetapi direktif ini harus diimpor ke proyek atau modul root tempat kami ingin menampilkannya. Mulai perintah yang disebutkan di atas pada prompt perintah Anda untuk membuat proyek sudut baru. Silakan coba salah satu perintah yang tercantum di bawah ini untuk memastikan bahwa semua pustaka yang diperlukan telah diinstal ke dalam proyek kami. Ini terutama berlaku untuk pengembang, yang dapat menggunakan pustaka dan modul secara langsung di aplikasi kita tanpa harus berurusan dengan langkah-langkah menambahkan pustaka dan modul ke modul root.

Mat-ikon Svg

Mat- ikon svg adalah grafik vektor sederhana yang dapat digunakan untuk mewakili ikon atau logo. Grafik dapat diubah ukurannya tanpa kehilangan kualitas, dan dapat dengan mudah diedit atau diubah.

Menggunakan komponen mat-ion material sudut, kita dapat membuat SVG lokal. Kami menyuntikkan layanan MatIconRegistry serta DomSanitizer di konstruktor. Fungsi registerIcons() menyertakan parameter load dan URL, serta fungsi pribadi yang disebut load. Jika kita menggunakan variasi ini, kita hanya perlu menambahkan nama file gambar. Jika Anda menggunakan string, fungsi load icon.service sedikit berbeda. Nama gambar akan dihasilkan dengan menggunakan indeks sebagai kunci untuk nama gambar pada fungsi load. Layanan ini sekarang harus diaktifkan saat aplikasi mulai dimuat. Jauh lebih mudah untuk membaca dan memelihara kode karena jauh lebih mudah dibaca. Kami telah membagi gambar menjadi beberapa bagian terpisah, dan layanan yang lebih sederhana telah diterapkan.