phosphor-icons / unplugin

A sprite sheet generator plugin for Phosphor Icons

Warning

This plugin is extremely experimental, and is subject to change. Use at your own risk!

@phosphor-icons/unplugin

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.

Installation

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

Vite

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

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

Example: playground/react-vite

Rollup

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

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

Webpack

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

Nuxt

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

This module works for both Nuxt 2 and Nuxt Vite

Vue CLI

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

esbuild

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

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

Options

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

Usage

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.

Our Projects

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

Community Projects

• adamglin0/compose-phosphor-icons ▲ Phosphor icons for Compose Multiplatform
• altdsoy/phosphor_icons ▲ Phosphor icons for Phoenix and TailwindCSS
• amPerl/egui-phosphor ▲ Phosphor icons for egui apps (Rust)
• babakfp/phosphor-icons-svelte ▲ Phosphor icons for Svelte apps
• brettkolodny/phosphor-lustre ▲ Phosphor icons for Lustre
• cellularmitosis/phosphor-uikit ▲ XCode asset catalog generator for Phosphor icons (Swift/UIKit)
• cjohansen/phosphor-clj ▲ Phosphor icons as Hiccup for Clojure and ClojureScript
• codeat3/blade-phosphor-icons ▲ Phosphor icons in your Laravel Blade views
• dennym/phosphor_icons_ex ▲ Phosphor icons for Elixir, Phoenix and Ash
• dreamRs/phosphor-r ▲ Phosphor icon wrapper for R documents and applications
• duongdev/phosphor-react-native ▲ Phosphor icon component library for React Native
• haruaki07/phosphor-svelte ▲ Phosphor icons for Svelte apps
• IgnaceMaes/ember-phosphor-icons ▲ Phosphor icons for Ember apps
• iota-uz/icons ▲ Phosphor icons as Templ components (Go)
• jajuma/phosphorhyva ▲ Phosphor icons for Magento 2 & Mage-OS with Hyvä Theme
• Kitten ▲ Phosphor icons integrated by default in Kitten
• lucagoslar/phosphor-css ▲ CSS wrapper for Phosphor SVG icons
• maful/ruby-phosphor-icons ▲ Phosphor icons for Ruby and Rails applications
• meadowsys/phosphor-svgs ▲ Phosphor icons as Rust string constants
• mwood/tamagui-phosphor-icons ▲ Phosphor icons for Tamagui
• noozo/phosphoricons_elixir ▲ Phosphor icons as SVG strings for Elixir/Phoenix
• oyedejioyewole/nuxt-phosphor-icons ▲ Phosphor icons integration for Nuxt
• pepaslabs/phosphor-uikit ▲ Xcode asset catalog generator for Swift/UIKit
• raycast/phosphor-icons ▲ Phosphor icons Raycast extension
• reatlat/eleventy-plugin-phosphoricons ▲ An Eleventy shortcode plugin to embed icons as inline SVGs
• robruiz/wordpress-phosphor-icons-block ▲ Phosphor icon block for use in WordPress v5.8+
• sachaw/solid-phosphor ▲ Phosphor icons for SolidJS
• SeanMcP/phosphor-astro ▲ Phosphor icons as Astro components
• SorenHolstHansen/phosphor-leptos ▲ Phosphor icon component library for Leptos apps (Rust)
• vnphanquang/phosphor-icons-tailwindcss ▲ TailwindCSS plugin for Phosphor icons
• wireui/phosphoricons ▲ Phosphor icons for Laravel

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

License

MIT © Phosphor Icons

unplugin's Issues

Support for VueJS planned?

Hi! Thank you for this awesome (un)plugin 🙏

I wanted to know if there were some plan to support vue as a target? (despite what the Readme announce, it doesn't seem to be currently the case)

It would help me to have some visibility for the (vue) project I'm working on that uses Phosphor Icons, to decide if I should consider some workarounds as I'm very much not a fan of bundling SVGs in JS on production-ready projects

Does not work with Remix/RR v7

Reproduction Repo

https://github.com/ivan-kleshnin/unplugin-bug

Run npm run dev.

Performed Steps

1. Bootstrap minimal template:npx create-react-router@latest --template remix-run/react-router-templates/minimal
2. Modify vite.config.ts according to the Vite section in the docs
   (= the above repo link at this point)
3. Run npm run dev
4. Get this:

node:internal/modules/cjs/loader:1970
    throw new ERR_INVALID_ARG_VALUE('filename', filename, createRequireError);
          ^

TypeError [ERR_INVALID_ARG_VALUE]: The argument 'filename' must be a file URL object, file URL string, or absolute path string. Received undefined
    at createRequire (node:internal/modules/cjs/loader:1970:11)
    at file:///Users/ivankleshnin/Sandboxes/my-rr/node_modules/@phosphor-icons/unplugin/dist/chunk-OEJUFV6D.js:24:24
    at ModuleJob.run (node:internal/modules/esm/module_job:327:25)
    at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:663:26)
    at async loadConfigFromBundledFile (file:///Users/ivankleshnin/Sandboxes/my-rr/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:49416:15)
    at async bundleAndLoadConfigFile (file:///Users/ivankleshnin/Sandboxes/my-rr/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:49259:22)
    at async loadConfigFromFile (file:///Users/ivankleshnin/Sandboxes/my-rr/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:49222:44)
    at async resolveConfig (file:///Users/ivankleshnin/Sandboxes/my-rr/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:48718:24)
    at async _createServer (file:///Users/ivankleshnin/Sandboxes/my-rr/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:38329:18)
    at async file:///Users/ivankleshnin/Sandboxes/my-rr/server.ts:17:23 {
  code: 'ERR_INVALID_ARG_VALUE'
}