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 アイコン スプライト ファイルを誤って挿入しているようです。
アップデート:
- angular-cli を使用した SVG icon systemという同様の質問を既に認識しています。提案された答えは、Node モジュールsvg-spriteを使用して、CSS モードを使用して SVG スプライトを生成することでした。しかし、これは私が求めているものではありません。私は SVG スプライトを生成しようとはしていません。Angular コンポーネントに SVG スプライトを認識さ
icons.svgせ、使用するたびに HTML でレンダリングできるようにしようとしています。 - 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
import { Component } from '@angular/core';
// import `./icons.svg`; // This import method doesn't work
@Component({
selector: 'my-app',
template: `
<!-- This import method doesn't work -->
<!-- <script src="./icons.svg"></script> -->
<p>
Hello this is a sample Angular 6 component.
</p>
<p>Testing to see if SVG icon sprite import works. See below if icons appear. </p>
<p>Icon (home): <svg class="icon icon-home"><use xlink:href="#icon-home"></use></svg> </p>
<p>Icon (rocket): <svg class="icon icon-rocket"><use xlink:href="#icon-rocket"></use></svg> </p>
<p>Icon (wifi): <svg class="icon icon-connection"><use xlink:href="#icon-connection"></use></svg>
<!-- This import method doesn't work -->
<!-- <p>Icon (home): <svg class="icon icon-home"><use xlink:href="./icons.svg#icon-home"></use></svg> </p>-->
</p>
`,
styles: [`
.icon {
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
`]
})
export class AppComponent {
}