An unplugin for transforming your Phosphor Icon imports into static SVG sprite sheets. Multiple frameworks, metaframeworks, and build tooling supported, although very much WIP. Explore all our icons at phosphoricons.com.

npm i -D @phosphor-icons/unplugin
#^ or whatever package manager you use

// vite.config.ts
import PhosphorUnplugin from "@phosphor-icons/unplugin/vite";

export default defineConfig({
  plugins: [
    PhosphorUnplugin({
      framework: "react",
      assetPath: "/assets/phosphor.svg"
    }),
  ],
});

// rollup.config.js
import PhosphorUnplugin from "@phosphor-icons/unplugin/vite";

export default {
  plugins: [
    PhosphorUnplugin({
      /* options */
    }),
  ],
};

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require("@phosphor-icons/unplugin/webpack")({
      /* options */
    }),
  ],
};

// nuxt.config.js
export default defineNuxtConfig({
  modules: [
    [
      "@phosphor-icons/unplugin/nuxt",
      {
        framework: "vue",
        /* options */
      },
    ],
  ],
});

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require("@phosphor-icons/unplugin/webpack")({
        framework: "vue",
        /* options */
      }),
    ],
  },
};

// esbuild.config.js
import { build } from "esbuild";
import PhosphorUnplugin from "@phosphor-icons/unplugin/esbuild";

build({
  plugins: [PhosphorUnplugin({ framework: "react" })],
});

The plugin can be configured to work with

• framework?: "react" | "svelte" | "vue" — The base framework of your code. Defaults to "react".
• assetPath?: string — The relative URL at which the generated sprite sheet will be placed. Defaults to /phosphor.svg.
• packageName?: string — Override the default Phosphor package which will be transformed. The default depends on th framework chosen:
  • react: @phosphor-icons/react
  • vue: @phosphor-icons/vue
  • svelte: phosphor-svelte

Import icons from the Phosphor package as normal, making sure that all props passed to rendered icons are literal values:

// App.tsx
import { Smiley, SmileySad } from "@phosphor-icons/react";

function App() {
  return (
    <p>
      <span>Hello, world! Yesterday I was</span>
      <SmileySad color="blue" size="2em" />
      <span>, today I am</span>
      <Smiley weight="fill" color="goldenrod" size="3em" />
      <span>!</span>
    </p>
  );
}

This will be transformed at build-time into something resembling this:

// App.tsx
import { Smiley, SmileySad } from "@phosphor-icons/react";

function App() {
  return (
    <p>
      <span>Hello, world! Yesterday I was</span>
      <svg color="blue" width="2em" height="2em">
        <use href="/phosphor.svhgsmiley-sad-regular" />
      </svg>
      <span>, today I am</span>
      <svg color="goldenrod" width="3em" height="3em">
        <use href="/phosphor.svg#smiley-fill" />
      </svg>
      <span>!</span>
    </p>
  );
}

And a sprite sheet will be generated and placed at assetPath in the public directory of your build directory:

<!-- phosphor.svg -->
<svg xmlns="http://www.w3.org/2000/svg">
  <symbol viewBox="0 0 256 256" fill="currentColor" id="smiley-sad-regular">
    <path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216ZM80,108a12,12,0,1,1,12,12A12,12,0,0,1,80,108Zm96,0a12,12,0,1,1-12-12A12,12,0,0,1,176,108Zm-1.08,64a8,8,0,1,1-13.84,8c-7.47-12.91-19.21-20-33.08-20s-25.61,7.1-33.08,20a8,8,0,1,1-13.84-8c10.29-17.79,27.39-28,46.92-28S164.63,154.2,174.92,172Z"></path>
  </symbol>
  <symbol viewBox="0 0 256 256" fill="currentColor" id="smiley-fill">
    <path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24ZM92,96a12,12,0,1,1-12,12A12,12,0,0,1,92,96Zm82.92,60c-10.29,17.79-27.39,28-46.92,28s-36.63-10.2-46.92-28a8,8,0,1,1,13.84-8c7.47,12.91,19.21,20,33.08,20s25.61-7.1,33.08-20a8,8,0,1,1,13.84,8ZM164,120a12,12,0,1,1,12-12A12,12,0,0,1,164,120Z"></path>
  </symbol>
</svg>

In future, we hope to support dynamic and computed props for all frameworks and build tooling, but at the moment any non-literal props will cause the build process to fail.

• @phosphor-icons/homepage ▲ Phosphor homepage and general info
• @phosphor-icons/core ▲ Phosphor icon assets and catalog
• @phosphor-icons/react ▲ Phosphor icon component library for React
• @phosphor-icons/web ▲ Phosphor icons for Vanilla JS
• @phosphor-icons/vue ▲ Phosphor icon component library for Vue
• @phosphor-icons/swift ▲ Phosphor icon component library for SwiftUI
• @phosphor-icons/elm ▲ Phosphor icons for Elm
• @phosphor-icons/flutter ▲ Phosphor IconData library for Flutter
• @phosphor-icons/webcomponents ▲ Phosphor icons as Web Components
• @phosphor-icons/figma ▲ Phosphor icons Figma plugin
• @phosphor-icons/sketch ▲ Phosphor icons Sketch plugin
• @phosphor-icons/pack ▲ Phosphor web font stripper to generate minimal icon bundles
• @phosphor-icons/theme ▲ A VS Code (and other IDE) theme with the Phosphor color palette

• phosphor-react-native ▲ Phosphor icon component library for React Native
• phosphor-svelte ▲ Phosphor icons for Svelte apps
• phosphor-r ▲ Phosphor icon wrapper for R documents and applications
• blade-phosphor-icons ▲ Phosphor icons in your Laravel Blade views
• wireui/phosphoricons ▲ Phosphor icons for Laravel
• phosphor-css ▲ CSS wrapper for Phosphor SVG icons
• ruby-phosphor-icons ▲ Phosphor icons for Ruby and Rails applications
• eleventy-plugin-phosphoricons ▲ An Eleventy plugin for add shortcode, allows Phosphor icons to be embedded as inline svg into templates
• phosphor-leptos ▲ Phosphor icon component library for Leptos apps (rust)
• wordpress-phosphor-icons-block ▲ Phosphor icon block for use in WordPress v5.8+
• ember-phosphor-icons ▲ Phosphor icons for Ember apps

If you've made a port of Phosphor and you want to see it here, just open a PR here!

MIT © Phosphor Icons