example modal js package fix

client/components/IconUsageExamples/ExampleHomeAssistant.tsx

@@ -8,9 +8,11 @@ import Link from '@/components/Link/Link';
 import Code from '@/components/CodeHighlighter/CodeHighlighter';
 
 import classes from './IconUsageExamples.module.scss';
+import { IconLibrary } from '@/interfaces/icons';
 
 interface ExampleHomeAssistantProps {
   library: string;
+  libraryInfo: IconLibrary;
   iconName: string;
   visible: boolean;
 }

client/components/IconUsageExamples/ExampleReact.tsx

@@ -11,13 +11,16 @@ import kebabToPascal from '@/utils/helpers/kebabToPascal';
 
 import classes from './IconUsageExamples.module.scss';
 
+import { IconLibrary } from '@/interfaces/icons';
+
 interface ExampleReactProps {
   library: string;
+  libraryInfo: IconLibrary;
   iconName: string;
   visible: boolean;
 }
 
-const ExampleReact: FunctionComponent<ExampleReactProps> = ({ iconName, library, visible }) => {
+const ExampleReact: FunctionComponent<ExampleReactProps> = ({ iconName, library, libraryInfo, visible }) => {
   const jsName = `${library}${kebabToPascal(iconName)}`;
 
   return (
@@ -30,7 +33,7 @@ const ExampleReact: FunctionComponent<ExampleReactProps> = ({ iconName, library,
     >
       <Code className={cx('language-jsx', classes.code)} displayAsBlock>{
 `import Icon from '@mdi/react';
-import { ${jsName} } from '@${library}/js';
+import { ${jsName} } from '@${libraryInfo.jsPackage}';
 
 <Icon path={${jsName}} size={1} />`
       }</Code>

client/components/IconUsageExamples/ExampleVue.tsx

@@ -10,14 +10,16 @@ import Code from '@/components/CodeHighlighter/CodeHighlighter';
 import kebabToPascal from '@/utils/helpers/kebabToPascal';
 
 import classes from './IconUsageExamples.module.scss';
+import { IconLibrary } from '@/interfaces/icons';
 
 interface ExampleVueProps {
   library: string;
+  libraryInfo: IconLibrary;
   iconName: string;
   visible: boolean;
 }
 
-const ExampleVue: FunctionComponent<ExampleVueProps> = ({ iconName, library, visible }) => {
+const ExampleVue: FunctionComponent<ExampleVueProps> = ({ iconName, library, libraryInfo, visible }) => {
   const jsName = `${library}${kebabToPascal(iconName)}`;
 
   return (
@@ -35,7 +37,7 @@ const ExampleVue: FunctionComponent<ExampleVueProps> = ({ iconName, library, vis
 
 <script>
 import SvgIcon from '@jamescoyle/vue-icon';
-import { ${jsName} } from '@${library}/js';
+import { ${jsName} } from '@${libraryInfo.jsPackage}';
 
 export default {
   name: "my-component",

client/components/IconUsageExamples/ExampleWebfont.tsx

@@ -9,9 +9,11 @@ import Link from '@/components/Link/Link';
 import Code from '@/components/CodeHighlighter/CodeHighlighter';
 
 import classes from './IconUsageExamples.module.scss';
+import { IconLibrary } from '@/interfaces/icons';
 
 interface ExampleWebfontProps {
   library: string;
+  libraryInfo: IconLibrary;
   iconName: string;
   visible: boolean;
 }

client/components/IconUsageExamples/IconUsageExamples.tsx

@@ -8,6 +8,7 @@ import ExampleWebfont from './ExampleWebfont';
 import ExampleHomeAssistant from './ExampleHomeAssistant';
 
 import classes from './IconUsageExamples.module.scss';
+import { IconLibrary } from '@/interfaces/icons';
 
 const exampleTypesDef = {
   'home-assistant': {
@@ -31,10 +32,11 @@ const exampleTypesDef = {
 interface IconUsageExamplesProps {
   exampleTypes: string[];
   library: string;
+  libraryInfo: IconLibrary;
   iconName: string;
 }
 
-const IconUsageExamples: FunctionComponent<IconUsageExamplesProps> = ({ exampleTypes = [], iconName, library }) => {
+const IconUsageExamples: FunctionComponent<IconUsageExamplesProps> = ({ exampleTypes = [], iconName, library, libraryInfo }) => {
   const [ activeExample, setActiveExample ] = useState(0);
 
   if (!exampleTypes.length) {
@@ -68,6 +70,7 @@ const IconUsageExamples: FunctionComponent<IconUsageExamplesProps> = ({ exampleT
           <ExampleComponent
             key={`panel-${type}`}
             library={library}
+            libraryInfo={libraryInfo}
             iconName={iconName}
             visible={activeExample === i}
           />

client/components/IconView/IconView.tsx

@@ -243,6 +243,7 @@ const IconView: FunctionComponent<IconViewProps> = ({ closeOnMoreInfo, icon, lib
                 <IconUsageExamples
                   exampleTypes={exampleTypes}
                   library={libraryInfo.id}
+                  libraryInfo={libraryInfo}
                   iconName={icon.n}
                 />
               </div>

client/config.js

@@ -79,6 +79,7 @@ module.exports = {
         gridSize: 24,
         id: 'mdi',
         image: 'images/libraries/mdi.svg',
+        jsPackage: '@mdi/js',
         name: 'Material Design Icons',
         package: '@mdi/svg',
         packageId: '38EF63D0-4744-11E4-B3CF-842B2B6CFE1B',
@@ -93,6 +94,7 @@ module.exports = {
         gridSize: 24,
         id: 'mdil',
         image: 'images/libraries/mdil.svg',
+        jsPackage: '@mdi/light-js',
         name: 'Material Design Icons Light',
         package: '@mdi/light-svg',
         packageId: '531A9B44-1962-11E5-89CC-842B2B6CFE1B',
@@ -106,6 +108,7 @@ module.exports = {
         gridSize: 22,
         id: 'memory',
         image: 'images/libraries/memory.svg',
+        jsPackage: '@pictogrammers/memory',
         name: 'Memory Icons',
         package: '@pictogrammers/memory-svg',
         packageId: '2764ae46-20c1-11ed-8ca4-1209440c2141',

client/interfaces/icons.ts

@@ -16,6 +16,7 @@ export interface IconLibrary {
   image: string;
   name: string;
   package: string;
+  jsPackage: string;
   packageId: string;
   shortName: string;
   unreleased?: boolean;