{"_id":"@designthen/svelte-icons","name":"@designthen/svelte-icons","dist-tags":{"latest":"5.0.0-next.1"},"versions":{"5.0.0-next.1":{"name":"@designthen/svelte-icons","version":"5.0.0-next.1","license":"MIT","author":{"name":"Ollie Taylor"},"homepage":"https://github.com/designthen/svelte-icons#readme","sideEffects":false,"repository":{"type":"git","url":"git+https://github.com/designthen/svelte-icons.git"},"bugs":{"url":"https://github.com/designthen/svelte-icons/issues"},"type":"module","scripts":{"dev":"vite dev","build":"vite build && pnpm package","preview":"vite preview","package":"svelte-kit sync && svelte-package && publint","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","lint":"prettier --check --plugin-search-dir=. .","format":"prettier --write --plugin-search-dir=. .","release":"pnpm package && changeset publish","ts":"tsc --pretty --noImplicitAny --noEmit","sync":"svelte-kit sync","clone":"pnpm run clone:simple-icons && pnpm run clone:heroicons && pnpm run clone:boxicons","clone:boxicons":"./scripts/clone-boxicons.sh > import.clone:boxicons.log","clone:heroicons":"./scripts/clone-heroicons.sh > import.clone:heroicons.log","clone:simple-icons":"./scripts/clone-simple-icons.sh > import.clone:simple-icons.log","icon:import":"node ./scripts/import.cjs > ./import.log","icon:update":"pnpm run clone && pnpm run icon:import && pnpm format"},"dependencies":{"@changesets/cli":"^2.27.1","@sveltejs/adapter-auto":"^3.1.1","@sveltejs/kit":"^2.5.1","@sveltejs/package":"^2.2.7","@sveltejs/vite-plugin-svelte":"^3.0.2","@types/node":"^20.11.20","cheerio":"1.0.0-rc.12","prettier":"^3.2.5","prettier-plugin-svelte":"^3.2.1","publint":"^0.2.2","svelte":"^5.0.0-next.52","svelte-check":"^3.6.4","svelte-preprocess":"^5.0.4","svelte2tsx":"^0.7.1","tslib":"^2.6.2","typescript":"^5.2.2","vite":"^5.1.4"},"peerDependencies":{"svelte":">=3.0.0"},"typesVersions":{">4.0":{"heroicon-16-solid":["./dist/heroicon-16-solid/index.d.ts"],"heroicon-16-solid/*":["./dist/heroicon-16-solid/*.d.ts"],"heroicon-20-solid":["./dist/heroicon-20-solid/index.d.ts"],"heroicon-20-solid/*":["./dist/heroicon-20-solid/*.d.ts"],"heroicon-24-solid":["./dist/heroicon-24-solid/index.d.ts"],"heroicon-24-solid/*":["./dist/heroicon-24-solid/*.d.ts"],"heroicon-24-outline":["./dist/heroicon-24-outline/index.d.ts"],"heroicon-24-outline/*":["./dist/heroicon-24-outline/*.d.ts"],"simple-icons":["./dist/simple-icons/index.d.ts"],"simple-icons/*":["./dist/simple-icons/*.d.ts"],"boxicons-logos":["./dist/boxicons-logos/index.d.ts"],"boxicons-logos/*":["./dist/boxicons-logos/*.d.ts"],"boxicons-regular":["./dist/boxicons-regular/index.d.ts"],"boxicons-regular/*":["./dist/boxicons-regular/*.d.ts"],"boxicons-solid":["./dist/boxicons-solid/index.d.ts"],"boxicons-solid/*":["./dist/boxicons-solid/*.d.ts"]}},"exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"},"./heroicon-16-solid":{"types":"./dist/heroicon-16-solid/index.d.ts","svelte":"./dist/heroicon-16-solid/index.js"},"./heroicon-16-solid/*.svelte":{"types":"./dist/heroicon-16-solid/*.svelte.d.ts","svelte":"./dist/heroicon-16-solid/*.svelte"},"./heroicon-20-solid":{"types":"./dist/heroicon-20-solid/index.d.ts","svelte":"./dist/heroicon-20-solid/index.js"},"./heroicon-20-solid/*.svelte":{"types":"./dist/heroicon-20-solid/*.svelte.d.ts","svelte":"./dist/heroicon-20-solid/*.svelte"},"./heroicon-24-solid":{"types":"./dist/heroicon-24-solid/index.d.ts","svelte":"./dist/heroicon-24-solid/index.js"},"./heroicon-24-solid/*.svelte":{"types":"./dist/heroicon-24-solid/*.svelte.d.ts","svelte":"./dist/heroicon-24-solid/*.svelte"},"./heroicon-24-outline":{"types":"./dist/heroicon-24-outline/index.d.ts","svelte":"./dist/heroicon-24-outline/index.js"},"./heroicon-24-outline/*.svelte":{"types":"./dist/heroicon-24-outline/*.svelte.d.ts","svelte":"./dist/heroicon-24-outline/*.svelte"},"./simple-icons":{"types":"./dist/simple-icons/index.js","svelte":"./dist/simple-icons/index.js"},"./simple-icons/*.svelte":{"types":"./dist/simple-icons/*.svelte.d.ts","svelte":"./dist/simple-icons/*.svelte"},"./boxicons-logos":{"types":"./dist/boxicons-logos/index.js","svelte":"./dist/boxicons-logos/index.js"},"./boxicons-logos/*.svelte":{"types":"./dist/boxicons-logos/*.svelte.d.ts","svelte":"./dist/boxicons-logos/*.svelte"},"./boxicons-regular":{"types":"./dist/boxicons-regular/index.js","svelte":"./dist/boxicons-regular/index.js"},"./boxicons-regular/*.svelte":{"types":"./dist/boxicons-regular/*.svelte.d.ts","svelte":"./dist/boxicons-regular/*.svelte"},"./boxicons-solid":{"types":"./dist/boxicons-solid/index.js","svelte":"./dist/boxicons-solid/index.js"},"./boxicons-solid/*.svelte":{"types":"./dist/boxicons-solid/*.svelte.d.ts","svelte":"./dist/boxicons-solid/*.svelte"}},"svelte":"./dist/index.js","types":"./dist/index.d.ts","packageManager":"pnpm@8.15.0","_id":"@designthen/svelte-icons@5.0.0-next.1","gitHead":"f6f6a79760d312cc8a00f87386f0c0a696c17d67","description":"Combines <a href=\"https://heroicons.com\"><strong>Heroicons V2 &rarr;</strong></a> & <a href=\"https://simpleicons.org/\"><strong>Simple Icons &rarr;</strong></a> as easy to use SVG components in your svelte project.","_nodeVersion":"20.11.1","_npmVersion":"10.2.4","dist":{"integrity":"sha512-FewuA7h2s9ZsvjXdY1HTxx4oA3a8ERRBV7NXg/zbKco9VxMOKnJCKQpQDS7YzC8Nomo62e0RzzKe/Vv5X6P6qA==","shasum":"3f04fcf8b2019eefa08aeaa1e67e307f4fe23fcf","tarball":"https://registry.npmjs.org/@designthen/svelte-icons/-/svelte-icons-5.0.0-next.1.tgz","fileCount":11763,"unpackedSize":10855646,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH9D1yrfMcU2t7wI6uDKuUWr8AX7H3rkNRbN1aud4K8QAiBLn707jkBizgqQEg7FTlAI38ioMUg3Ix89buuYEoprhg=="}]},"_npmUser":{"name":"olliejt","email":"ollie@inqling.studio"},"directories":{},"maintainers":[{"name":"olliejt","email":"ollie@inqling.studio"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-icons_5.0.0-next.1_1708872439818_0.23754085690817806"},"_hasShrinkwrap":false}},"time":{"created":"2024-02-25T14:47:19.711Z","5.0.0-next.1":"2024-02-25T14:47:20.050Z","modified":"2024-02-25T14:47:20.613Z"},"maintainers":[{"name":"olliejt","email":"ollie@inqling.studio"}],"description":"Combines <a href=\"https://heroicons.com\"><strong>Heroicons V2 &rarr;</strong></a> & <a href=\"https://simpleicons.org/\"><strong>Simple Icons &rarr;</strong></a> as easy to use SVG components in your svelte project.","homepage":"https://github.com/designthen/svelte-icons#readme","repository":{"type":"git","url":"git+https://github.com/designthen/svelte-icons.git"},"author":{"name":"Ollie Taylor"},"bugs":{"url":"https://github.com/designthen/svelte-icons/issues"},"license":"MIT","readme":"# [Svelte Icons](https://www.npmjs.com/package/@designthen/svelte-icons)\n\nCombines <a href=\"https://heroicons.com\"><strong>Heroicons V2 &rarr;</strong></a> & <a href=\"https://simpleicons.org/\"><strong>Simple Icons &rarr;</strong></a> as easy to use SVG components in your svelte project.\n\nCheckout the <a href=\"https://github.com/DesignThen/svelte-icons/blob/main/CHANGELOG.md\">changelog</a> to see what's new.\n\n<p align=\"center\">\n  <img src=\"https://github.com/designthen/svelte-icons/blob/main/static/banner.png?raw=true\" alt=\"Heroicons + Simple icons, The best icon library combined with brand icons ready for use in Svelte.\" width=\"830\" height=\"212\">\n</p>\n\n![npm](https://img.shields.io/npm/v/@designthen/svelte-icons?style=for-the-badge) ![NPM](https://img.shields.io/npm/l/@designthen/svelte-icons?style=for-the-badge) ![npm](https://img.shields.io/npm/dt/@designthen/svelte-icons?style=for-the-badge) ![GitHub last commit (branch)](https://img.shields.io/github/last-commit/DesignThen/svelte-icons/main?style=for-the-badge)\n\n---\n\n## Why this package?\n\nCopying SVG code into your project can become tedious and messy. With icons it can become particularly unnecessary as you probably don't need to edit the SVG markup. This library simply makes it easier to import each icon and have it scale based on it's inherited font-size.\n\nThis library adapts the following repositories for use in Svelte:\n\n- Heroicons: [tailwindlabs/heroicons](https://github.com/tailwindlabs/heroicons)\n- Simple Icons: [simple-icons/simple-icons](https://github.com/simple-icons/simple-icons)\n\n## Usage\n\n### Install\n\n```bash\n# npm\nnpm i @designthen/svelte-icons@latest\n\n#yarn\nyarn add @designthen/svelte-icons@latest\n\n#pnpm\npnpm add @designthen/svelte-icons@latest\n```\n\n### Importing Icons\n\nView an example in [/src/routes/+page.svelte](https://github.com/DesignThen/svelte-icons/blob/main/src/routes/%2Bpage.svelte)\n\nNote that component names can't start with a number, so icons like `1Password` are prefixed with `I` and renamed to `I1Password`. You might ask why we don't rename icons like `1Password` to `OnePassword`? Well, that's because the original icon is called `1Password` and we want it to be easy to search for with intellisense.\n\n```html\n<script>\n\t// using default exports for single icons\n\timport StarSolid from '@designthen/svelte-icons/heroicon-24-solid/star-solid';\n\n\t// using named exports for multiple icons in a pack\n\timport { Github, I500px } from '@designthen/svelte-icons/simple-icons';\n</script>\n```\n\n| Icon Pack         | Import Path                                    |\n| ----------------- | ---------------------------------------------- |\n| Heroicons solid   | `@designthen/svelte-icons/heroicon-24-solid`   |\n| Heroicons outline | `@designthen/svelte-icons/heroicon-24-outline` |\n| Heroicons small   | `@designthen/svelte-icons/heroicon-20-solid`   |\n| Simple Icons      | `@designthen/svelte-icons/simple-icons`        |\n\nFrom each pack you can import multiple icons from a pack at once, or import a single icon directly.\n\n### Passed Props\n\nIcons should behave as you expect most components.\n\n```html\n<script>\n\t// import 1 icon directly (recommended)\n\timport GitHub from '@designthen/svelte-icons/simple-icons/github.svelte';\n\t// import multiple icons from a pack\n\timport { Svelte, OnePassword } from '@designthen/svelte-icons/simple-icons';\n</script>\n\n<style>\n\t:global(.icon) {\n\t\theight: 24px;\n\t}\n\n\tsection :global(svg) {\n\t\tfill: red;\n\t}\n</style>\n\n<OnePassword class=\"icon\" style=\"width:24px;\" />\n<Svelte class=\"icon\" style=\"width:24px;\" />\n<GitHub class=\"icon\" style=\"width:24px;\" />\n```\n\n## Contributing\n\n### There are new icons that are missing from this package. How do I updating this package to include them?\n\n1. Make sure you have dependencies installed with `pnpm install`.\n2. Run `pnpm icon:update` to clone and import the latest SVG's from the following repositories:\n   1. Heroicons: [@tailwindlabs: heroicons/src](https://github.com/tailwindlabs/heroicons/tree/master/src).\n   2. Simple Icons: [@simple-icons: simple-icons/icons](https://github.com/simple-icons/simple-icons/tree/develop/icons).\n3. You'll likely see that a few hundred files have changed. Run `pnpm format` to ensure consistent formatting. Now you'll see that only new or updated icon files have changed.\n\n### How to I contribute my work?\n\n1. Commit your changes\n2. Run `npx changeset` to create a new changeset.\n   1. Follow the instructions to create a changeset.\n   2. Adding new icons is considered a `minor` version bump.\n   3. Commit the changeset.\n3. Open a pull request. Feel free to tag @OllieJT or @DesignThen.\n\n### How do I add new icon packs aside from Heroicons and Simple Icons?\n\nWe're open to adding new icon packs.\n\nA script should be written for each new pack added - this is fairly simple and is mostly copying and pasting from the existing scripts. In the future I will add more details about writing a \"clone script\".\n\n1. Place all SVG icons in `/import` with one level of folder structure.\n   - you should not nest svg's more than one level deep\n   - only svg's are imported\n   - svg code is not validated\n   - svg attributes will be standardized\n2. run `yarn import-svg` to convert all SVG files to svelte components.\n3. Generated files can be found at `/src/lib/...`.\n\n```\nExample folder structure\n\nimport/\n⮑ heroicons-solid/\n   ⮑ icon1.svg\n   ⮑ icon2.svg\n   ⮑ ..\n⮑ heroicons-outline/\n   ⮑ icon1.svg\n   ⮑ icon2.svg\n   ⮑ ...\n⮑ .gitkeep\nREADME.md (you're here)\npackage.json\n...\n```\n\n### How do I publish a new version to npm?\n\nAbove you'll see we answer `How to I contribute my work?`. Here we explain how to use changesets to trigger a new version to be prepared. Once a PR has been approved that contains a changeset, a new version will be build and deployed to npm via github actions.\n","readmeFilename":"README.md"}