mdi-paths-split

mdi-paths

STATUS: Moved to @slimr/mdi-paths

Material Design Icon paths for any TS/JS project, packaged as single components.

• Each modules is named to match the name in https://materialdesignicons.com, so easy to find
• Unlike most libraries, this one includes all the aliases found in https://materialdesignicons.com
• By splitting the paths into different files, lazy loading is easy and possible!
• Version is pinned to the version of @mdi/svg this was generated from

Installation

npm install mdi-paths-split
# or if you use Yarn
yarn add mdi-paths-split

Usage

Just search for an icon on materialdesignicons.com and look for its name.
The name translates to PascalCase in mdi-paths-split.

Also it's possible to import with an alias. You can find them on the detail page of the respective icon.

Simplest Usage:

import HomePath from 'mdi-paths-split/Home'
export function HomeIcon ({ color = 'currentColor', size = 24, ...props }) {
  const className = 'mdi-icon ' + (props.class || props.className || '');
  return (
    <svg {...props} class={className} width={size} height={size} fill={color} viewBox="0 0 24 24">
      <path d={HomePath} />
    </svg>
  );
}

With Lazy-Loading/Code-Splitting and blank placeholder:

export function HomeIcon ({ color = 'currentColor', size = 24, ...props }) {
  const className = 'mdi-icon ' + (props.class || props.className || '');
  const [path, setPath] = useState('')
  useEffect(() => { 
    import('mdi-paths-split/Home'))().then((module: any) => setPath(module.default)) 
  }, [])

  return (
    <svg {...props} class={className} width={size} height={size} fill={color} viewBox="0 0 24 24">
      <path d={path} />
    </svg>
  );
}

And here is how I use it. I made a helper component and factory to make it crazy easy to add more icons while simultaneously reducing line-count per-icon. Notice how each icon is code-split and lazy loaded with an empty placeholder!!!!

import {Account, Counter, Home} from '~/components/Icons'

export default function HeaderLogo() {
    return <div>
        <Account />
        <Counter />
        <Home />
    </div>
}

Source of helper ~/components/Icons:

import { h } from 'preact';
import { useEffect, useState } from 'preact/hooks';

export const Account =   I(() => import('mdi-paths-split/CardAccountDetailsOutline'))
export const Counter =   I(() => import('mdi-paths-split/Counter'))
export const Home =      I(() => import('mdi-paths-split/HomeOutline'))
// ... add as many as you want


function I(lazyPath: LazyPathType) { // aka Icon Factory, shortened to be easier to read
  return (props: IconProps) => <LazySvg lazyPath={lazyPath} {...props} />
}
type IconProps = Omit<LazySvgProps, 'lazyPath'>


function LazySvg({ lazyPath, color = 'currentColor', size = 24, ...props }: LazySvgProps) {
  const className = 'mdi-icon ' + (props.class || props.className || '');
  const [path, setPath] = useState('')
  useEffect(() => { lazyPath().then((module: any) => setPath(module.default)) }, [])

  return (
    <svg {...props} class={className} width={size} height={size} fill={color} viewBox="0 0 24 24">
      <path d={path} />
    </svg>
  );
};
type LazyPathType = () => Promise<any>
interface LazySvgProps {
  color?: string
  size?: number | string
  class?: string
  className?: string
  children?: never
  lazyPath: LazyPathType
}

References

• mdi-react - The generator in this package was adapted from that one (Thanks!). This package achieves similar things but does so with much less bandwidth penalty per icon.
• materialdesignicons.com - Where to browse icons
• @mdi/js - Very similar to this lib, but puts all the paths in one file
• @mdi/svg - Where this lib gets the icons from