問題タブ [svg-sprite]

Angular アプリケーション (Angular 4/5/6) を構築しており、コンポーネント テンプレートで SVG スプライトを使用したいと考えています。

質問: 既に SVG アイコン スプライトが生成されていると仮定すると ( icons.svg)、Angular で SVG アイコン スプライトをコンポーネントのテンプレートに挿入/インポートするにはどうすればよいですか?

サードパーティのモジュール/ディレクティブを使用せずに SVG アイコン スプライトをコンポーネントに挿入/インポートし、Angular 自体でネイティブに実行する方法はありますか?

背景/問題:

この記事で説明したように、icons.svgファイルには として定義されたすべての SVG アイコンが含まれます<symbol>。次に、DOM に挿入されていると<use>仮定して、HTML で選択したアイコンをレンダリングできます。icons.svg

IcoMoon appを使用して SVG スプライトを生成icons.svgし、Angular アプリケーションに保存しました。以下は、ファイルを挿入/インポートし、HTML で SVG アイコンをレンダリングしようとしている私のサンプル Angular コンポーネント ( app.component.ts ) です。icons.svgただし、Angular は私の SVG アイコンをレンダリングしていません。SVG アイコン スプライト ファイルを誤って挿入しているようです。

アップデート:

1. angular-cli を使用した SVG icon systemという同様の質問を既に認識しています。提案された答えは、Node モジュールsvg-spriteを使用して、CSS モードを使用して SVG スプライトを生成することでした。しかし、これは私が求めているものではありません。私は SVG スプライトを生成しようとはしていません。Angular コンポーネントに SVG スプライトを認識さicons.svgせ、使用するたびに HTML でレンダリングできるようにしようとしています。
2. https://stackoverflow.com/a/50460361/4988010という解決策が提案され、SVG スプライトから CSS フォントを生成しました。これは実行可能な解決策ではなく、代わりに SVG スプライトを使用できない場合の「回避策」だと思います。

app.component.ts : StackBlitz のライブ サンプル: https://stackblitz.com/edit/angular-bbr2kh?file=src/app/app.component.ts

構成しようとしていますsvg-sprite-loader/plugin。そのタスク用にスタンドアロンの Webpack 構成ファイルを作成しました。指定されたディレクトリを調べて.svg、そこからすべてを取得します。結果はicons.svgスプライトファイルです。ただし、 Webpack.jsはすべてのエントリ ファイルに対しても作成します。それらのファイルを除外または削除することは可能ですか? つまり、プラグイン出力のみが必要で、他には何も必要ありません。

前もって感謝します！

PS たぶん、タスクの完了後にプログラムでこれらのファイルを削除する必要がありますか?

webpack.prod.conf.js

webpack.sprites.conf.js

私はgulpのワークフローを備えたフロントエンドプロジェクトをいくつか持っています。

プラグイン:

• がぶ飲み注​​入
• ブラウザ同期
• ぐるぐる時計
• gulp-userref

gulpfile.js:

html:

html ファイルを変更する前に、すべてが正常に機能します。変更があると、コンパイルされたインライン svg ファイルが html ファイル内 (inject 内) に消えます。

コードを試してみます：

gulpfile.js :

すべてが機能し、Webサーバーが再起動され、ファイルが変更されてクリアされ、スプライトがhtml保存 されますが、タスクは機能しなくなりました.svguseref()

vendor.jsファイルをビルドしますが、 に書き込みませんdist/index.html。そして生成後は次のようになります。

質問:コンソールでアセンブリ全体を再起動せずに、また html ファイル内で生成された svg スプライトを失うことなく、html ファイルを変更できるように gulpfile.js を構成することは可能ですか?