# phosphor-svelte Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really. More icons at [phosphoricons.com](https://phosphoricons.com). [![npm](https://img.shields.io/npm/v/phosphor-svelte)](https://npm.im/phosphor-svelte) ## Installation ```bash yarn add --dev phosphor-svelte ``` or ```bash npm install --save-dev phosphor-svelte ``` ## Usage ```html ``` > [!WARNING] > You might encounter slower compilation when importing phosphor-svelte icons using named exports (`import { X } from "phosphor-svelte"`). > This is caused by the [dependency pre-bundling](https://vitejs.dev/guide/dep-pre-bundling.html#dependency-pre-bundling). > I've created a preprocessor as a workaround, please read the [Import Optimizer](#import-optimizer-experimental) section. ### 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: ```html ``` ### Composability Components can accept arbitrary SVG elements as children, so long as they are valid children of the `` 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: ```html ``` > **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](https://developer.mozilla.org/en-US/docs/Web/SVG/Element#SVG_elements_by_category) will be rendered. ### Import Optimizer (Experimental) It is a simple Svelte preprocessor that rewrite imports named export from phosphor-svelte into their source path. This will speed up compile times during development. > [!WARNING] > Please note that this preprocessor is still experimental and has only been tested on the latest version of Svelte+Vite and SvelteKit. > Errors and bugs are to be expected. > Any feedbacks are welcome. #### Usage First exclude phosphor-svelte from being pre-bundled by adding `exlude` in `optimizeDeps` on your Vite config. ```javascript // vite.config.js export default defineConfig({ plugins: [svelte()], optimizeDeps: { exclude: ["phosphor-svelte"], }, }) ``` Then add the preprocessor into your `svelte.config.js` file before the `vitePreprocess()`. ```javascript // svelte.config.js import { phosphorSvelteOptimize } from "phosphor-svelte/preprocessor" export default { preprocess: [phosphorSvelteOptimize(), vitePreprocess()], } ``` So, when you import like this: ```html ``` It will be rewritten into this: ```html ``` ## License MIT © [Phosphor Icons](https://github.com/phosphor-icons) ## Knowledge - [Phosphor React](https://github.com/phosphor-icons/phosphor-react/) - [Carbon Icons Svelte](https://github.com/IBM/carbon-icons-svelte/)