Setup
Run the following command to add the module to your project:
bash >_
$ pnpm dlx nuxi@latest module add nuxt-phosphor-icons
Congratulations 🎉. You have successfully add the module to your project and can now browse the icon library
Note: This module would add a little bit of an overhead in the development and production environments.
Why? Well, this module loads 1512 icons globally as async chunks with no prefetching/preloading — I might add. No further explanation, that's all.
Usage
I want to read about the
vue YourComponent
<PhosphorIcon name="sun" />
You can use the props below to customize how the icon being rendered
Choose what icon to render. You can find them in the icon library
vue YourComponent
<PhosphorIcon name="moon-stars" />
You could also dynamically render an icon based on conditions, i.e;
vue YourComponent
<PhosphorIcon :name="{ 'moon-stars': isLightModeToggled, 'sun': !isLightModeToggled }" />
It's preferrable if there is only one key-value pair that's truthy at all times, else the component uses .find() to get the first truthy match.
Note: Doing this preloads all the keys of the name prop object (to load times faster).
You could also extend the component with custom attributes utilizing the <slot /> element provided within the runtime component.
vue YourComponent
<PhosphorIcon name="moon-stars">
<style> /* Your styling goes here */ </style>
</PhosphorIcon>
Configuration
You can configure the module using the phosphorIcons key in the nuxt.config
This key allows you to set the name of the component registered by the module.
Default: phosphor-icon
ts nuxt.config
export default defineNuxtConfig({
phosphorIcons: {
componentName: "phi",
},
});