web-dev-qa-db-ja.com

Ionic 5？

私は最近Ionic 4からIonic 5.に更新しました。Ionic 5を使用すると、アイコンも更新されました。どうやら、アイコンをロードするメカニズムが変更されました。

Ionic 4では、次のようにカスタムアイコンを追加できました： https：// medium。 com/@ JordanBenge/how-to-create-custom-ionic-4-icons-af80cc6cc148

追加するios-my-custom-icon.svgおよびmd-my-custom-icon.svginiconfolder in theassets。次に、angular.jsonでそれらを参照する必要がありました：

 ...
   "assets": [
          ...
          {
            "glob": "**/*.svg",
            "input": "src/assets/icon",
            "output": "./svg"
          },
          ...
   ]
...

そして、ついにhtmlの他のイオンアイコンのようにそれらを呼び出すことができます。

<ion-icon name="my-custom-icon"></ion-icon>

ただし、これはionic 5ではもう機能しません。誰かがionic 5？

[〜＃〜] edit [〜＃〜]：次のようなsrc属性を介してそれらを呼び出すことがまだ可能であることに気付きました

<ion-icon src="assets/icon/md-my-custom-icon.svg"></ion-icon>

ただし、name属性を使用する場合のように便利ではありません。上記と同等のものがある可能性はありますか？

ionic-frameworkionic4ionic5
5
Chris

アイコン名からmd-を削除する必要があります。

たとえば、アイコンはmd-my-custom-icon.svgです。

my-custom-icon.svgに変更します。その後、カスタムアイコンはionic 5

乾杯

[〜＃〜]更新[〜＃〜]

アイコン名にmd-を戻し、実際にmd-を以下のようにion iconタグに追加する必要がありました。このように、デフォルトのアイコンではなく、カスタムアイコンを使用します。

<ion-icon name="md-my-custom-icon"></ion-icon>

1
Telma C.

いつでも[]し、必要に応じて変数を指定します。

const myCustomIcon = "/assets/icons/custom.svg";

そしてマークアップでは：

<ion-icon [src]="myCustomIcon"></ion-icon>
1
rtpHarry