svg中的symbol如何制作icon
本篇文章给大家带来的内容是关于svg中的symbol如何制作icon，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
1. cnpm i gulp -g
2. 新建一个gulpfile.js文件
var gulp = require('gulp');
var svgSymbols = require('gulp-svg-symbols');
gulp.task('sprites',function(){
return gulp.src('assets/svg/*.svg').pipe(svgSymbols()).pipe(gulp.dest('assets'));
})3.新建assets/svg，将下载下来的svg放到svg文件中
Tip:将svg文件名改成需要的id
4.运行gulp sprites
5.直接在HTML中使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.icon{
width:32px;
height:32px;
fill:red;
}
</style>
</head>
<body>
<svg class="icon">
<use xlink:href="/assets/svg-symbols.svg#boat"></use>
</svg>
</body>
</html>相关文章推荐：
Atas ialah kandungan terperinci svg中的symbol如何制作icon. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Mari kita bincangkan tentang cara menggunakan SVG untuk mencapai kesan mozek imej
Sep 01, 2022 am 11:05 AM
Bagaimana untuk menggunakan SVG untuk mencapai kesan mozek imej tanpa menggunakan Javascript? Artikel berikut akan memberi anda pemahaman terperinci, saya harap ia akan membantu anda!
Bagaimana untuk menukar format svg kepada jpg
Nov 24, 2023 am 09:50 AM
svg boleh ditukar kepada format jpg dengan menggunakan perisian pemprosesan imej, menggunakan alat penukaran dalam talian dan menggunakan perpustakaan pemprosesan imej Python. Pengenalan terperinci: 1. Perisian pemprosesan imej termasuk Adobe Illustrator, Inkscape dan GIMP 2. Alat penukaran dalam talian termasuk CloudConvert, Zamzar, Tukar Dalam Talian, dll. 3. Perpustakaan pemprosesan imej Python, dll.;
Analisis mendalam tentang cara menggunakan ikon svg dalam vue3 vite
Apr 28, 2022 am 10:48 AM
imej svg digunakan secara meluas dalam projek Artikel berikut akan memperkenalkan cara menggunakan ikon svg dalam vue3 vite.
Tutorial pengenalan VUE3: Gunakan pemalam Vue.js untuk bermain dengan SVG
Jun 16, 2023 am 09:48 AM
Dengan pembangunan berterusan pembangunan hadapan Web moden, semakin banyak teknologi digunakan secara meluas dalam pembangunan sebenar. Antaranya, Vue.js kini merupakan salah satu rangka kerja JavaScript yang paling popular Ia berdasarkan model MVVM dan menyediakan API yang kaya dan perpustakaan komponen, menjadikannya lebih mudah untuk membangunkan aplikasi web yang responsif, boleh digunakan semula dan cekap. Berbanding dengan versi lama, versi Vue.js3 terkini mempunyai prestasi yang lebih baik dan ciri yang lebih kaya, yang telah menarik perhatian dan penyelidikan yang meluas. Artikel ini akan memperkenalkan kepada anda a
Ketahui cara menggunakan rangka kerja Gulp dengan Laravel Elixir
Jan 22, 2024 am 11:27 AM
Laravel Elixir ialah set alat automasi bahagian hadapan yang popular berdasarkan Gulp, yang memudahkan banyak tugas yang memerlukan kerja manual sebelum ini. Tetapi reka bentuk API Laravel Elixir yang elegan tidak bermakna pembangun tidak perlu memahami penggunaan Gulp sama sekali. Sebaliknya, memahami penggunaan Gulp dapat lebih memahami prinsip kerja Laravel Elixir dan meningkatkan kecekapan pembangunan. Artikel ini akan memperkenalkan cara menggunakan Gulp dalam rangka kerja Laravel Elixir
Lukis fail SVG pada kanvas HTML5
Sep 15, 2023 pm 03:09 PM
Untuk melukis HTMLImageElements pada elemen kanvas, gunakan kaedah drawImage(). Kaedah ini mentakrifkan pembolehubah Imej menggunakan src="mySVG.svg" dan menggunakan drawImage semasa memuatkan. varmyImg=newImage();myImg.onload=function(){ ctx.drawImage(myImg,0,0);}img.src="http://www.example.com/files/sample.svg";
Bagaimana untuk menggunakan svg dalam vue3+vue-cli4
May 11, 2023 pm 05:58 PM
一、安装svg-sprite-loadernpminstallsvg-sprite-loader--save-dev二、在src/components/svgIcon下新建组件index.vueimport{dikira}dari"@vue/reactivity{name";exportbasedefault"; prop:{iconClass:{type:String},className:{type:String},},setup
Penjelasan terperinci tentang penggunaan SVG untuk menambah logo pada favicon
Sep 07, 2022 am 10:30 AM
Bagaimana untuk menambah logo ke favicon menggunakan SVG? Artikel berikut akan memperkenalkan kepada anda cara menggunakan SVG untuk menjana favicon dengan logo. Saya harap ia akan membantu anda!
