A clean and friendly icon family for Solid-js

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




``bash`
yarn add phosphor-solid
or
`bash`
npm install --save phosphor-solid
Simply import the icons you need, and add them anywhere in your render method. Phosphor supports tree-shaking, so your bundle only includes code for the icons you use.
`tsx
import {render} from 'solid-js';
import { Horse, Heart, Cube } from "phosphor-solid";
const App = () => {
return (
render( () =>
`
Icon components accept all props that you can pass to a normal SVG element, including inline style objects, onClick handlers, and more. The main way of styling them will usually be with the following 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.number | string
- size?: – Icon height & width. As with standard solid elements, this can be a number, or a string with units in px, %, em, rem, pt, cm, mm, in."thin" | "light" | "regular" | "bold" | "fill" | "duotone"
- weight?: – 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.boolean
- mirrored?: – Flip the icon horizontally. Can be useful in RTL languages where normal icon orientation is not appropriate.
Phosphor takes advantage of Solid-js Context to make applying a default style to all icons simple. Create an IconContext.Provider 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:
`tsx
import {render} from 'solid-js';
import { IconContext, Horse, Heart, Cube } from "phosphor-solid";
const App = () => {
return (
color: "limegreen",
size: 32,
weight: "bold",
mirrored: false,
}}
>
You may create multiple Contexts for styling icons differently in separate regions of an application; icons use the nearest Context above them to determine their style.
> Note: The
color, size, weight, and mirrored properties are all _required_ props when creating a context.$3

Components can accept arbitrary SVG elements as children, so long as they are valid children of the