Before dig into writing a resolver, let's first walkthrough about Strategy/Resolver Pattern.

👉 Resolver Pattern

This is a simpler design pattern - it allows you to:

1. Encapsulate a family of related algorithms
2. Allow them to vary
3. Allow a class to maintain a single purpose and implementation
4. Separate the calculation from the delivery of its results
5. By doing this we can maintain standard principles, leaving the code open to extension but closed to modification.

👉 Problem

While developing SPA Icons play a very vital role, So as per User Experience we are using icons on a very high demand, Material UI is a most commonly used design system with ReactJS application development, Having 100+ imports in your components for Icon specific only is a messy thing i ever seen.

👉 Solution

Considering Resolver Pattern, Let's develop a resolver with Javascript/React/Angular/Vue to resolve the icon which is required to use inside a component, You only have to import a resolver file inside your components and pass a key related to your icon, resolver will compare that key in imports itself and return you an specific icon, cool 😎 right? Let's develop this small resolver to solve our major problem rocket 🚀

👉 Steps for developing Icon Resolver 🧰

1. Create a directory named resolvers
2. Create a .js file name iconResolver.js
3. Write a parametrised function for resolving an icon

👉 Development - Step by Step

1. Import all Material Icons inside your iconResolver.js file

   import { Dashboard, Home, List, Menu, ShoppingCart } from "@mui/icons-material";
   

2. inside your function create an object of icons with key/value pairs by consuming imported icons

   // list of all available icons 
    const icons = {
        default: Dashboard,
        dashboard: Dashboard,
        menu: Menu,
        cart: ShoppingCart,
        home: Home,
        list: List
    }
   

3. Checking if required icon from a component file is available in resolver imports or not

   const _icon = icons[name] ? icons[name] : icons['default'];
   

4. Let's return a resolved icon to a desired file 😊

   return(<_icon key={`resolved_icon_${name}`}/>);
   

5. Consume resolver in your component by importing it and passing a key of icon you need:

// Component
import IconResolver from '../../core/resolvers/iconResolver';

<div>
  {IconResolver('home)}
</div>

👉 Full Resolver Source Code

Here's a full source of resolver from a separate file iconResolver.js

import { Dashboard, Home, List, Menu, ShoppingCart } from "@mui/icons-material";

function IconResolver(name) {

    // list of all available icons 
    const icons = {
        default: Dashboard,
        dashboard: Dashboard,
        menu: Menu,
        cart: ShoppingCart,
        home: Home,
        list: List
    }

    // checking if icon which is invoked from a file is available in resolver or not 
    const _icon = icons[name] ? icons[name] : icons['default'];

    // returning a resolved icon to a desired file 
    return(<_icon key={`resolved_icon_${name}`}/>);
}

export default IconResolver;

Here's a source of resolver consumption from a component

// Component
import IconResolver from '../../core/resolvers/iconResolver';

<div>
  {IconResolver('home)}
</div>

Enjoy resolving 100 and 1000+ icons from a single file 🤩