nuǝɯ pǝɥsᴉꞁod mǝu

    phosphor-svelte
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.1 • Public • Published

    phosphor-svelte

    Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really. More icons at phosphoricons.com.

    Installation

    yarn add --dev phosphor-svelte

    or

    npm install --save-dev phosphor-svelte

    Usage

    <script>
      import { Horse, Heart } from "phosphor-svelte";
      // or
      import Cube from "phosphor-svelte/lib/Cube"; // Recommended for faster compiling
    </script>
    
    <Horse />
    <Heart color="#AE2983" weight="fill" size="{32}" />
    <Cube color="teal" weight="duotone" />

    Props

    • color?: string – Icon stroke/fill color. Can be any CSS color string, including hex, rgb, rgba, hsl, hsla, named colors, or the special currentColor variable.
    • size?: number | string – Icon height & width. As with standard React elements, this can be a number, or a string with units in px, %, em, rem, pt, cm, mm, in.
    • weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone" – Icon weight/style. Can also be used, for example, to "toggle" an icon's state: a rating component could use Stars with weight="regular" to denote an empty star, and weight="fill" to denote a filled star.
    • mirrored?: boolean – Flip the icon horizontally. Can be useful in RTL languages where normal icon orientation is not appropriate.

    Context

    Apply default style to all icons. Create an IconContext at the root of the app (or anywhere above the icons in the tree) and pass in a configuration object with props to be applied by default to all icons inside context:

    <script>
      import IconContext from "phosphor-svelte/lib/IconContext";
      // or
      // import { IconContext } from "phosphor-svelte";
    
      import Cube from "phosphor-svelte/lib/Cube";
      import Horse from "phosphor-svelte/lib/Horse";
      import Heart from "phosphor-svelte/lib/Heart";
    </script>
    
    <IconContext
      values={{ color: 'limegreen', size: 32, mirrored: false, weight: 'bold' }}>
      <Horse /> <!-- I'm lime-green, 32px, and bold! -->
      <Heart /> <!-- Me too! -->
      <Cube color="red" /> <!-- red -->
    </IconContext>

    Composability

    Components can accept arbitrary SVG elements as children, so long as they are valid children of the <svg> element. This can be used to modify an icon with background layers or shapes, filters, animations and more. The children will be placed below the normal icon contents.

    The following will cause the Cube icon to rotate and pulse:

    <Cube color="darkorchid" weight="duotone">
      <animate
        attributeName="opacity"
        values="0;1;0"
        dur="4s"
        repeatCount="indefinite"
      ></animate>
      <animateTransform
        attributeName="transform"
        attributeType="XML"
        type="rotate"
        dur="5s"
        from="0 0 0"
        to="360 0 0"
        repeatCount="indefinite"
      ></animateTransform>
    </Cube>

    Note: The coordinate space of slotted elements is relative to the contents of the icon viewBox, which is a 256x256 square. Only valid SVG elements will be rendered.

    License

    MIT © Phosphor Icons

    Knowledge

    Install

    npm i phosphor-svelte

    DownloadsWeekly Downloads

    230

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    3.87 MB

    Total Files

    4200

    Last publish

    Collaborators

    • haruaki07