Custom Component Error Class & Icon name variable used. (#188)

* Fix: TypeScript error, property 'hint' doesn't exist on type 'Error'. Created new class for error.

* Fix: TypeScript error, The name 'providedIconName' isn't found. Using right variable name.

packages/core/components/Icon.astro

@@ -15,6 +15,14 @@ interface Props extends HTMLAttributes<"svg"> {
   height?: number;
 }
 
+class AstroIconError extends Error {
+  public hint: string;
+
+  constructor(message: string) {
+    super(message);
+  }
+}
+
 const req = Astro.request;
 const { name = "", title, ...props } = Astro.props;
 const map = cache.get(req) ?? new Map();
@@ -30,9 +38,9 @@ const includeSymbol = i === 0;
 let [setName, iconName] = (name as string).split(":");
 
 if (!setName && iconName) {
-  const err = new Error(`Invalid "name" provided!`);
+  const err = new AstroIconError(`Invalid "name" provided!`);
   if (import.meta.env.DEV) {
-    err.hint = `The provided value of "${name}" is invalid.\n\nDid you forget the icon set name? If you were attemping to reference a local icon, use the icon's name directly. (ie. "${providedIconName}")`;
+    err.hint = `The provided value of "${name}" is invalid.\n\nDid you forget the icon set name? If you were attemping to reference a local icon, use the icon's name directly. (ie. "${iconName}")`;
   }
   throw err;
 }
@@ -45,7 +53,7 @@ if (!iconName) {
 
   // Check if the local icon set exists
   if (!icons[setName]) {
-    const err = new Error('Unable to load the "local" icon set!');
+    const err = new AstroIconError('Unable to load the "local" icon set!');
     if (import.meta.env.DEV) {
       err.hint =
         'It looks like the "local" set was not loaded.\n\nDid you forget to create the icon directory or to update your config?';
@@ -55,7 +63,7 @@ if (!iconName) {
 
   // Check if the icon is missing from the local collection
   if (!(iconName in icons[setName].icons)) {
-    const err = new Error(`Unable to locate "${name}" icon!`);
+    const err = new AstroIconError(`Unable to locate "${name}" icon!`);
     if (import.meta.env.DEV) {
       err.hint = `The icon named "${iconName}" was not found in your local icon directory.\n\nDid you forget to configure your icon directory or make a typo?`;
     }
@@ -67,7 +75,7 @@ const collection = icons[setName];
 
 // Iconify collection not configured correctly
 if (!collection) {
-  const err = new Error(`Unable to locate the "${setName}" icon set!`);
+  const err = new AstroIconError(`Unable to locate the "${setName}" icon set!`);
   if (import.meta.env.DEV) {
     if (sets.includes(setName)) {
       err.hint = `It looks like the "${setName}" set was not loaded.\n\nDid you install the "@iconify-json/${setName}" dependency?`;
@@ -81,7 +89,7 @@ if (!collection) {
 const iconData = getIconData(collection, iconName ?? setName);
 // Missing icon from the icon collection
 if (!iconData) {
-  const err = new Error(`Unable to locate "${name}" icon!`);
+  const err = new AstroIconError(`Unable to locate "${name}" icon!`);
   if (import.meta.env.DEV) {
     const [maybeStar] = include[setName];
     if (maybeStar === "*" || include[setName].includes(iconName)) {