この記事の内容は、SVG でシンボルからアイコンを作成する方法についてです。必要な方は参考にしていただければ幸いです。
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ファイルに入れます
ヒント: svgファイル名を次のように変更します。必要なもの ID
4. gulp スプライトを実行します
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>
おすすめ関連記事:
SVG 描画関数: svg で花の描画を実現します(コード付き)
svg in< ;マーカー> 要素の使用とマーカー属性の導入
以上がSVGのシンボルからアイコンを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。