SVGのシンボルからアイコンを作成する方法-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

SVGのシンボルからアイコンを作成する方法

不言

Aug 08, 2018 am 11:15 AM

gulp svg

この記事の内容は、SVG でシンボルからアイコンを作成する方法についてです。必要な方は参考にしていただければ幸いです。

1. cnpm i gulp -g

2. 新しい gulpfile.js ファイルを作成します

var gulp = require(&#39;gulp&#39;);
var svgSymbols = require(&#39;gulp-svg-symbols&#39;);
gulp.task(&#39;sprites&#39;,function(){
    return gulp.src(&#39;assets/svg/*.svg&#39;).pipe(svgSymbols()).pipe(gulp.dest(&#39;assets&#39;));
})

ログイン後にコピー

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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7467

CakePHP チュートリアル

1376

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

SVG を使用して画像モザイク効果を実現する方法について話しましょう Sep 01, 2022 am 11:05 AM

Javascriptを使用せずにSVGを使用して画像モザイク効果を実現するにはどうすればよいですか?以下の記事で詳しく解説していますので、お役に立てれば幸いです。

svgをjpg形式に変換する方法 Nov 24, 2023 am 09:50 AM

svg は、画像処理ソフトウェア、オンライン変換ツール、Python 画像処理ライブラリを使用して jpg 形式に変換できます。詳細な紹介: 1. 画像処理ソフトウェアには Adobe Illustrator、Inkscape、GIMP が含まれます; 2. オンライン変換ツールには CloudConvert、Zamzar、Online Convert などが含まれます; 3. Python 画像処理ライブラリなどがあります。

vue3+vite で svg アイコンを使用する方法の詳細な分析 Apr 28, 2022 am 10:48 AM

svg 画像はプロジェクトで広く使用されていますが、次の記事では vue3 + vite で svg アイコンを使用する方法を紹介します。

VUE3 入門チュートリアル: Vue.js プラグインを使用して SVG を操作する Jun 16, 2023 am 09:48 AM

最新の Web フロントエンド開発の継続的な発展に伴い、実際の開発で広く使用されるテクノロジがますます増えています。その中でも、Vue.js は現在最も人気のある JavaScript フレームワークの 1 つであり、MVVM モデルに基づいており、豊富な API とコンポーネントライブラリを提供し、応答性が高く、再利用可能で効率的な Web アプリケーションの開発を容易にします。 Vue.js3 の最新バージョンは、古いバージョンよりも優れたパフォーマンスと豊富な機能を備えており、幅広い注目と研究を集めています。この記事では、

SVGを使用してファビコンにロゴを追加する方法の詳細な説明 Sep 07, 2022 am 10:30 AM

SVGを使用してファビコンにロゴを追加するにはどうすればよいですか?以下の記事ではSVGを使ってロゴ入りファビコンを生成する方法をご紹介しますので、ご参考になれば幸いです。

vue3+vite2でsvgメソッドを使用する方法 May 11, 2023 pm 05:55 PM

1. vite-plugin-svg-icons をインストールします。fast-glob 関連の依存関係もインストールする必要があります。そうでない場合、vite が npmrundev を実行すると、Cannotfindmodule'fast-glob' エラーが報告されます。npmifast-glob@3.x-Dnpmivite- plugin-svg. -icons@2.x-D 2. src/components/svgIcon の下に新しいコンポーネントindex.vueimport{computed}from'vue';cons を作成します。

Laravel Elixir で Gulp フレームワークを使用する方法を学ぶ Jan 22, 2024 am 11:27 AM

Laravel Elixir は、Gulp をベースにした人気のフロントエンド自動化ツールセットで、これまで手作業が必要だった多くのタスクを簡素化します。しかし、Laravel Elixir の洗練された API 設計は、開発者が Gulp の使用法をまったく理解する必要がないことを意味するものではありません。逆に、Gulp の使い方を理解することで、Laravel Elixir の動作原理をより深く理解し、開発効率を向上させることができます。この記事では、Laravel Elixir フレームワークで Gulp を使用する方法を紹介します。

vue3+vue-cli4でsvgを使用する方法 May 11, 2023 pm 05:58 PM

1. svg-sprite-loadernpminstallsvg-sprite-loader--save-dev をインストールします。 2. src/components/svgIcon の下に新しいコンポーネントを作成します。index.vueimport{computed}from"@vue/reactivity";exportdefault{name:"baseSvgIcon" 、props:{iconClass:{type:String},className:{type:String},},setup

See all articles

SVGのシンボルからアイコンを作成する方法

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック