phosphor-icons / react

A flexible icon family for React

Home Page:https://phosphoricons.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Export the SVG files

simontaisne opened this issue · comments

Is there any way to import the SVGs directly from phosphor-react? I looked in the other Phosphor packages but couldn't find a way. For those using Next.js with SVGR this would allow such usage with dynamic import.

const svg = {
  heart: dynamic<SVGProps<SVGSVGElement>>(() =>
    import('phosphor-react/svgs/heart.svg').then((mod) => mod.ReactComponent)
  ),
  ...
}

const Icon = ({ icon, ...props }) => {
  const Svg = svg[icon];

  return <Svg {...props} />;
};

Unfortunately the raw SVGs are not included in the public NPM package -- it would more than double the download size and we don't think that's a nice thing to do for the common use-case. You can download the assets yourself from our website, or from the repo here, and do this quite easily without a package.

FYI we now have the @phosphor-icons/core package which exposes the assets as an NPM package.