Phosphor Icons Svelte is a set of components designed for utilizing Phosphor Icons within the Svelte framework.

• Icons count: 1512 / per weight
• Weights: Bold Duotone Fill Light Regular Thin
• Supported Core version: 2.1.1

pnpm add -D phosphor-icons-svelte

<script>
    // heart (Regular)
    import IconHeartRegular from "phosphor-icons-svelte/IconHeartRegular.svelte"

    // heart-break (Bold)
    import IconHeartBreakBold from "phosphor-icons-svelte/IconHeartBreakBold.svelte"
</script>

<!-- heart (Regular) -->
<IconHeartRegular />

<!-- heart-break (Bold) -->
<IconHeartBreakBold />

Only a single prop (class) is supported for styling purposes.

<IconHeartRegular class="icon-heart-regular" />

The following are the default styles applied to all of the SVG elements.

<style>
    svg {
        width: 1em;
        height: 1em;
        fill: currentColor;
        pointer-events: none;
        display: inline-block;
    }
</style>

The CSS em unit is relative to the font-size of the element (2em means 2 times the size of the current font size).

By setting the fill property to currentColor, you inherit its value from color property.

Icons are visual elements, nothing more. So, there is no reason to keep them interactable. Using pointer-events: none on the icon will prevent all pointer interactions.

Helps in various styling scenarios.

The following are the default attributes added to all of the SVG elements.

Use this to flip/mirror the icons when their normal orientation isn't accurate for RTL languages.

[dir="rtl"] [data-phosphor-icon="heart"] {
    transform: scaleX(-1);
}

Icons are visual elements, nothing more. So, there is no reason to keep them visible to screen readers.

• TypeScript support.
• Built with accessibility in mind.
• Improved performance and developer experience.

Let's say we have the following two syntaxes:

Syntax 1 (NOT VALID) - Good looking syntax:

<script>
    import { Heart, HeartBreak } from "phosphor-icons-svelte"
</script>

<Heart />
<HeartBreak weight="bold" />

Syntax 2 - Ugly syntax:

<script>
    import IconHeartRegular from "phosphor-icons-svelte/IconHeartRegular.svelte"
    import IconHeartBreakBold from "phosphor-icons-svelte/IconHeartBreakBold.svelte"
</script>

<IconHeartRegular />
<IconHeartBreakBold />

The first syntax looks nice, but there are some problems with it! Phosphor Icons has more than 7K icons; This means when a single icon is imported (using the first syntax), in reality, all of the icons are being imported! This slows down your site's performance and loading time significantly (only during development). To solve this issue, this library only allows importing the icons individually.

What about combining all weights into a single component? Well, a similar issue happens in this case too. This time it happens in both development and production environments!

What about the Icon prefix? The Icon prefix prevents naming collisions with other components.