Overview:

The legacy Phosphor-Vue package is being replaced with @phosphor-icons/vue in a major update, which offers improved performance and a smaller bundle size. There are no API changes, making the transition to the new version straightforward. The legacy package will still receive maintenance but will not receive new icons updates. Phosphor icons are designed to be a versatile icon family suitable for various interfaces, diagrams, and presentations.

Features:

• Improved Performance: The new @phosphor-icons/vue package offers enhanced performance compared to the previous Phosphor-Vue package.
• Smaller Bundle Size: Users can benefit from a significantly reduced bundle size with the @phosphor-icons/vue package.
• Easy Transition: With no changes to APIs, upgrading to the new package is a simple drop-in replacement process.
• Styling Flexibility: Icon components accept various attributes for customization, such as color, size, weight, and mirroring.
• Composition Support: Phosphor icons utilize Vue’s provide/inject options for applying default styles to icons, allowing for easy customization.
• Slots for Customization: Components have a <slot> for adding arbitrary SVG elements within valid constraints.

Installation:

To install the @phosphor-icons/vue package, it is recommended not to install icons globally due to potential issues with tree-shaking by bundlers like Vite and Webpack. Instead, icons can be registered within the app following the provided guidelines:

// Registering icons in your Vue app
import { defineComponent } from 'vue';
import { IconName } from '@phosphor-icons/vue';

export default defineComponent({
  components: {
    IconName
  }
});

Summary:

The update from Phosphor-Vue to @phosphor-icons/vue offers improved performance and a smaller bundle size, making it a beneficial choice for users. The new package maintains the existing APIs for seamless transition, while also providing flexibility in styling and customization through various props and composition options. By following the installation guidelines and leveraging the features of the @phosphor-icons/vue package, users can enhance their applications with a versatile icon library.