Nail Polish Makeover

    mdi-paths-split

    5.9.55 • Public • Published

    mdi-paths npm package Material Design Icons version

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

    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.

    Here is an example of a Preact/React component. Notice how each icon is code-split and lazy loaded with an empty placeholder!!!!

    import {ReactLogo, Counter, Home} from '~/components/Icons'
    
    export default function HeaderLogo() {
        return <div>
            <ReactLogo />
            <Counter />
            <Home />
        </div>
    }

    Source of ~/components/Icons:

    import { FunctionalComponent, h } from 'preact';
    import { useEffect, useState } from 'preact/hooks';
    
    const IconFactory: IconFactoryType = (lazyPath) => (props: IconProps) => <LazySvg lazyPath={lazyPath} {...props} />
    
    export const React = IconFactory(() => import('mdi-paths-split/React'))
    export const Counter = IconFactory(() => import('mdi-paths-split/Counter'))
    export const Home = IconFactory(() => import('mdi-paths-split/HomeOutline'))
    
    type IconProps = Omit<LazySvgProps, 'lazyPath'>
    type IconType = FunctionalComponent<IconProps>;
    type IconFactoryType = (lazyPath: () => Promise<any>) => IconType
    
    
    export const LazySvg: LazySvgType = ({ lazyPath, color = 'currentColor', size = 24, ...props }) => {
      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>
      );
    };
    interface LazySvgProps {
      color?: string
      size?: number | string
      class?: string
      className?: string
      children?: never
      lazyPath: () => Promise<any>
    }
    type LazySvgType = FunctionalComponent<LazySvgProps>;

    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

    Install

    npm i mdi-paths-split

    DownloadsWeekly Downloads

    0

    Version

    5.9.55

    License

    MIT

    Unpacked Size

    7.66 MB

    Total Files

    19679

    Last publish

    Collaborators

    • bdombro