أنغولار - الأيقونات المخصصة مع أيونيك 5؟

قمت مؤخرًا بالتحديث من Ionic 4 إلى Ionic 5. مع Ionic 5، تلقت الرموز أيضًا تحديثًا. ومع ذلك، يبدو أن آلية تحميل الرموز تغيرت أيضًا.

في Ionic 4 كان من الممكن إضافة أيقونات مخصصة مثل هذا: Ionic 4: جعل الأيقونات المخصصة بسيطة

أضف على سبيل المثال ios-my-custom-icon.svg و md-my-custom-icon.svg في مجلد icon داخل assets. ثم كان من الضروري الإشارة إليها في angular.json كما يلي:

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

ويمكن للمرء في النهاية استدعاؤها مثل أيقونات الأيون الأخرى في HTML:

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

ومع ذلك، هذا لم يعد يعمل في أيونيك 5 بعد الآن. هل يعرف أحد، كيف يمكننا الآن تنفيذ أيقونات مخصصة في أيونيك 5؟

تعديل: أدركت أنه لا يزال من الممكن الاتصال بهم من خلال خاصية src مثل

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

ومع ذلك، هذا ليس مريحًا مثل استخدام خاصية الاسم. هل هناك أي فرصة لأن يكون لدينا ما يعادل ما سبق؟

الإجابة رقم 1

تحتاج إلى إزالة md- من اسم الأيقونة.

على سبيل المثال، الأيقونة الخاصة بك هي md-my-custom-icon.svg

قم بتغيير إلى my-custom-icon.svg. بعد ذلك ستعمل الأيقونات المخصصة مرة أخرى على Ionic 5

في صحتك

تحديث

اضطررت إلى إعادة وضع md- على اسم الأيقونة وفعليًا إضافة md- لوسم أيقونة أيون كما هو موضح أدناه. بهذه الطريقة، يستخدم أيقونتي المخصصة وليس الأيقونة الافتراضية.

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

الإجابة رقم 2

يمكنك دائمًا استخدام [] ثم تقديم متغير إذا كنت تفضل ذلك:

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

وفي الترميز:

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