{"_id":"@benjineer/phosphor-svelte","name":"@benjineer/phosphor-svelte","dist-tags":{"latest":"1.2.1"},"versions":{"1.2.1":{"name":"@benjineer/phosphor-svelte","version":"1.2.1","description":"A clean and friendly icon family for Svelte","svelte":"./lib/index.js","main":"./lib/index.js","types":"./lib/index.d.ts","type":"module","scripts":{"build":"yarn build:icon","build:icon":"node src/build.js"},"repository":{"type":"git","url":"git+https://github.com/haruaki07/phosphor-svelte.git"},"keywords":["icons","icon-pack","web","html","css","svg","svg-icons","icon-font"],"author":{"name":"haruaki07"},"license":"MIT","bugs":{"url":"https://github.com/haruaki07/phosphor-svelte/issues"},"homepage":"https://phosphoricons.com","peerDependencies":{"svelte":">=3"},"devDependencies":{"fs-extra":"^9.0.1","html-minifier-terser":"^5.1.1","log-update":"^4.0.0","svelte":"^3.0.0"},"gitHead":"1ce647bb16fad21c832e5864a10cd583b8073571","_id":"@benjineer/phosphor-svelte@1.2.1","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-n7MB0qv04HPawOAzRlZBulnQQtU3kmrF9NVsTMMRQYKojyJMFrxWBqMgkZ5TC46knryeVgd3IB/l4E+f1SlovA==","shasum":"f0eb4ebbd73652bd33c8bda8769c6a933077394e","tarball":"https://registry.npmjs.org/@benjineer/phosphor-svelte/-/phosphor-svelte-1.2.1.tgz","fileCount":3150,"unpackedSize":3952512,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH6X/0qAtjBaqROSRjk+iDT9PHmwC8PlwXP9UOTi28u1AiEArOI71gzbE3gzcdA7lCAZgU88ECFVbjx0Z+IpXQbHLNg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGhvkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBoA/+N3QvoJ6GLQapErlFERebv8u6uH6vdXre9duXQCdGXIIUdr94\r\neCRhykUa5rYSRsvw+n9v3QYAzFGsi7HZssDyDsn5/KspyI80MmZ65JbFytFC\r\nftvK4JcA7DT79BxEgtpf1NlLqwzKiVw3vIb1PCcW4H15tCcxdGLIc7ZXD6wz\r\nibf07qmaH+tUlMax2gTMj4QvAG0hr1dIplC7z3J69JgiIBAUPZ0MQ+Rvr7ef\r\n8NmIV9OX58LulPj8zFdh3T1x6iymNci0llutQCh3rI2sqnm+2goKg7hi/GTR\r\njHs3CewrKgvc2TIMvgGjAgyNv8La9lXbNPUvH80vYZ8VODYsrtlcRGCQwG5l\r\nsZm7Vc38AVLgrtMt9yvNDieQOLHZrZcaGGBJ8co6+RQdbGpofmHke5Zv0oYg\r\nV61B2vLyvJz62nCZxTQ/4Vd0SQcterD98JqDitm5J7GDI2THQmsUul/+9Fbp\r\nl2aeMaS7ZoxjmfIWxrvZCJZMOcVXWwrHQC7bh+zMPFF2JdfNhneZiLYGf5zY\r\nCjPeFUy7E95ejbPJbkx3FHNjv+uvO2q1rUtESDgVcFSU9i51aDgTFSTnmMDJ\r\nHNNMwikdrY6tcOsSGYcT+lX5NZu3AfafdVpJBnJi7Iuh/aLh5XcaMSM5iy0y\r\nZGJUhvIcorqfxVZl9XakJ3etUBzguV0ETYI=\r\n=fUrz\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bengralah","email":"8enwilliams@gmail.com"},"directories":{},"maintainers":[{"name":"bengralah","email":"8enwilliams@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/phosphor-svelte_1.2.1_1679432676433_0.3090857425378397"},"_hasShrinkwrap":false}},"time":{"created":"2023-03-21T21:04:36.368Z","1.2.1":"2023-03-21T21:04:36.745Z","modified":"2023-03-21T21:04:37.106Z"},"maintainers":[{"name":"bengralah","email":"8enwilliams@gmail.com"}],"description":"A clean and friendly icon family for Svelte","homepage":"https://phosphoricons.com","keywords":["icons","icon-pack","web","html","css","svg","svg-icons","icon-font"],"repository":{"type":"git","url":"git+https://github.com/haruaki07/phosphor-svelte.git"},"author":{"name":"haruaki07"},"bugs":{"url":"https://github.com/haruaki07/phosphor-svelte/issues"},"license":"MIT","readme":"<img src=\"./meta/phosphor-mark-tight-yellow.png\" width=\"128\" align=\"right\" />\r\n\r\n# phosphor-svelte\r\n\r\nPhosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really. More icons at [phosphoricons.com](https://phosphoricons.com).\r\n\r\n## Installation\r\n\r\n```bash\r\nyarn add --dev phosphor-svelte\r\n```\r\n\r\nor\r\n\r\n```bash\r\nnpm install --save-dev phosphor-svelte\r\n```\r\n\r\n## Usage\r\n\r\n```html\r\n<script>\r\n  import { Horse, Heart } from \"phosphor-svelte\";\r\n  // or\r\n  import Cube from \"phosphor-svelte/lib/Cube\"; // Recommended for faster compiling\r\n</script>\r\n\r\n<Horse />\r\n<Heart color=\"#AE2983\" weight=\"fill\" size=\"{32}\" />\r\n<Cube color=\"teal\" weight=\"duotone\" />\r\n```\r\n\r\n### Props\r\n\r\n- **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.\r\n- **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`.\r\n- **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.\r\n- **mirrored?**: `boolean` – Flip the icon horizontally. Can be useful in RTL languages where normal icon orientation is not appropriate.\r\n\r\n### Context\r\n\r\nApply 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:\r\n\r\n```html\r\n<script>\r\n  import IconContext from \"phosphor-svelte/lib/IconContext\";\r\n  // or\r\n  // import { IconContext } from \"phosphor-svelte\";\r\n\r\n  import Cube from \"phosphor-svelte/lib/Cube\";\r\n  import Horse from \"phosphor-svelte/lib/Horse\";\r\n  import Heart from \"phosphor-svelte/lib/Heart\";\r\n</script>\r\n\r\n<IconContext\r\n  values={{ color: 'limegreen', size: 32, mirrored: false, weight: 'bold' }}>\r\n  <Horse /> <!-- I'm lime-green, 32px, and bold! -->\r\n  <Heart /> <!-- Me too! -->\r\n  <Cube color=\"red\" /> <!-- red -->\r\n</IconContext>\r\n```\r\n\r\n### Composability\r\n\r\n<img src=\"./meta/cube-rotate.svg\" width=\"128\" align=\"right\" />\r\n\r\nComponents 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.\r\n\r\nThe following will cause the Cube icon to rotate and pulse:\r\n\r\n```html\r\n<Cube color=\"darkorchid\" weight=\"duotone\">\r\n  <animate\r\n    attributeName=\"opacity\"\r\n    values=\"0;1;0\"\r\n    dur=\"4s\"\r\n    repeatCount=\"indefinite\"\r\n  ></animate>\r\n  <animateTransform\r\n    attributeName=\"transform\"\r\n    attributeType=\"XML\"\r\n    type=\"rotate\"\r\n    dur=\"5s\"\r\n    from=\"0 0 0\"\r\n    to=\"360 0 0\"\r\n    repeatCount=\"indefinite\"\r\n  ></animateTransform>\r\n</Cube>\r\n```\r\n\r\n> **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.\r\n\r\n## License\r\n\r\nMIT © [Phosphor Icons](https://github.com/phosphor-icons)\r\n\r\n## Knowledge\r\n\r\n- [Phosphor React](https://github.com/phosphor-icons/phosphor-react/)\r\n- [Carbon Icons Svelte](https://github.com/IBM/carbon-icons-svelte/)\r\n","readmeFilename":"README.md"}