web-dev-qa-db-ja.com

ファイルからangular 5）のコンポーネントにsvgをインポートするにはどうすればよいですか？

私が見つけたAngularCliのコンポーネントにsvgを追加するすべてのチュートリアルでは、次のようなhtmlテンプレートに挿入することをお勧めします。

<div>
  <svg viewBox="0 0 250 250">
    <svg:g class="group">
       <svg:polygon class="shield" points="125,30 125,30 125,30 31.9,63.2 46.1,186.3 125,230 125,230 125,230 203.9,186.3 218.1,63.2" />
       <svg:path class="a" d="M125,52.1L66.8,182.6h0h21.7h0l11.7-29.2h49.4l11.7,29.2h0h21.7h0L125,52.1L125,52.1L125,52.1L125,52.1
      L125,52.1z M142,135.4H108l17-40.9L142,135.4z"/>
    </svg:g>
  </svg>
</div>

しかし、私はテンプレートを明確に保ち、​​分離されたsvgファイルへのURLを含むいくつかのタグのみをその中に挿入したいと思います。

<svg class="star">
        <use xlink:href="../../../assets/images/svg/star.svg"
               x="0"
               y="0" />
</svg>

コンポーネントで分離されたsvgファイルを使用するにはどうすればよいですか？

htmlangularsvgimportangular-universal
3
mr_blond

SVGファイルをsrc/assetsフォルダーに含め、svgフォルダーをangular.jsonファイルに追加します。

"assets": [ "src/assets/svg/*" ]

このようにして、必要に応じてファイルをコンポーネントに含めることができます。

2
Harini P

logo.svgがある場合：

  1. src/assetsフォルダに入れてください
  2. angular.json構成にフォルダーを含めます："assets": [ "src/assets" ]
  3. テンプレートから参照してください：<img src="assets/svg/logo.svg">
2
Boris Yakubchik

これを行う1つの方法は、svgファイルのidプロパティを設定し、svgファイルをアセットフォルダーに配置することです。次に、そのIDを次のようにmat-iconで使用します。

<mat-icon matSuffix svgIcon="your-id"></mat-icon>

これはそれを行うためのより良い方法です。このようにして、UIhtmlコードでsvgタグを処理する必要はありません。また、これはグーグルアイコンをサポートしています。

ただし、angular materialを使用している場合は機能します。

0
Arya11