{"_id":"@apan222/svelte-icon","_rev":"2-f42b2b4933b92330e569cd86f11fe5f9","name":"@apan222/svelte-icon","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.1":{"name":"@apan222/svelte-icon","version":"0.0.1","description":"Component for SVG-icons in svelte","license":"MIT","author":{"name":"Rasmus Jacklin"},"repository":{"type":"git","url":"git+https://github.com/02rasjac/svelte-icon-ts.git"},"keywords":["svelte","icon"],"bugs":{"url":"https://github.com/02rasjac/svelte-icon-ts/issues"},"homepage":"https://github.com/02rasjac/svelte-icon-ts#readme","scripts":{"dev":"vite dev","build":"vite build && npm run package","preview":"vite preview","package":"svelte-kit sync && svelte-package && publint","prepublishOnly":"npm run package","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","lint":"prettier --plugin-search-dir . --check . && eslint .","format":"prettier --plugin-search-dir . --write ."},"exports":{".":{"types":"./dist/SvgIcon.svelte.d.ts","svelte":"./dist/SvgIcon.svelte"}},"peerDependencies":{"svelte":"^4.0.0"},"devDependencies":{"@sveltejs/adapter-auto":"^2.0.0","@sveltejs/kit":"^1.20.4","@sveltejs/package":"^2.0.0","@typescript-eslint/eslint-plugin":"^5.45.0","@typescript-eslint/parser":"^5.45.0","eslint":"^8.28.0","eslint-config-prettier":"^8.5.0","eslint-plugin-svelte":"^2.30.0","prettier":"^2.8.0","prettier-plugin-svelte":"^2.10.1","publint":"^0.1.9","svelte":"^4.0.5","svelte-check":"^3.4.3","tslib":"^2.4.1","typescript":"^5.0.0","vite":"^4.4.2"},"types":"./dist/index.d.ts","type":"module","_id":"@apan222/svelte-icon@0.0.1","gitHead":"959990f21acd666b8c40c4e8d0db108279c9e560","_nodeVersion":"18.17.1","_npmVersion":"9.8.1","dist":{"integrity":"sha512-BGsBqG36W2RaQgCHhKBT1lEM7F72i4+aqu4EUHvW/V3XY93z0NgO96gjRlo9PsyAMOL/544EGJT9l3jrcT9Nmg==","shasum":"8bd596467770f498f6f51278771cb0e7f1e07bfe","tarball":"https://registry.npmjs.org/@apan222/svelte-icon/-/svelte-icon-0.0.1.tgz","fileCount":7,"unpackedSize":6076,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB9oPsSst9IAz1v8QmzFeZiBub3NLjstUuTyq2GZ3VfwAiBJUwkwo+u+4UIyWSaRpXs6LrW1OgXjceLUHkWrelgwvg=="}]},"_npmUser":{"name":"apan222","email":"Rasmusjacklin2002@gmail.com"},"directories":{},"maintainers":[{"name":"apan222","email":"Rasmusjacklin2002@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-icon_0.0.1_1692186758438_0.1385940142483424"},"_hasShrinkwrap":false},"0.0.2":{"name":"@apan222/svelte-icon","version":"0.0.2","description":"Component for SVG-icons in svelte","license":"MIT","author":{"name":"Rasmus Jacklin"},"repository":{"type":"git","url":"git+https://github.com/02rasjac/svelte-icon-ts.git"},"keywords":["svelte","icon"],"bugs":{"url":"https://github.com/02rasjac/svelte-icon-ts/issues"},"homepage":"https://github.com/02rasjac/svelte-icon-ts#readme","scripts":{"dev":"vite dev","build":"vite build && npm run package","preview":"vite preview","package":"svelte-kit sync && svelte-package && publint","prepublishOnly":"npm run package","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","lint":"prettier --plugin-search-dir . --check . && eslint .","format":"prettier --plugin-search-dir . --write ."},"exports":{".":{"types":"./dist/SvgIcon.svelte.d.ts","svelte":"./dist/SvgIcon.svelte"}},"peerDependencies":{"svelte":"^4.0.0"},"devDependencies":{"@sveltejs/adapter-auto":"^2.0.0","@sveltejs/kit":"^1.20.4","@sveltejs/package":"^2.0.0","@typescript-eslint/eslint-plugin":"^5.45.0","@typescript-eslint/parser":"^5.45.0","eslint":"^8.28.0","eslint-config-prettier":"^8.5.0","eslint-plugin-svelte":"^2.30.0","prettier":"^2.8.0","prettier-plugin-svelte":"^2.10.1","publint":"^0.1.9","svelte":"^4.0.5","svelte-check":"^3.4.3","tslib":"^2.4.1","typescript":"^5.0.0","vite":"^4.4.2"},"types":"./dist/index.d.ts","type":"module","_id":"@apan222/svelte-icon@0.0.2","gitHead":"646c466ff86449c686f79647fc85447944fcdae4","_nodeVersion":"18.17.1","_npmVersion":"9.8.1","dist":{"integrity":"sha512-B26xtfQYd6rKoc5SRHSscLQcTE8i+znjCckVHxnwxbrK9KGFvAp4iuqD7+yj8V1UVo8VJ2fOu0x2PILGWytl3Q==","shasum":"0811da10274029ca98327473b2ee5b6671f28628","tarball":"https://registry.npmjs.org/@apan222/svelte-icon/-/svelte-icon-0.0.2.tgz","fileCount":7,"unpackedSize":6078,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpSP2F1ltttn9b9BlLfmNa/nX6AWvewm9ZFnH6MNsqjwIgZ2hht+p/8Pq6BASq1JdiDEPtRh/UUjxJfyCOgY8Ar0I="}]},"_npmUser":{"name":"apan222","email":"Rasmusjacklin2002@gmail.com"},"directories":{},"maintainers":[{"name":"apan222","email":"Rasmusjacklin2002@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-icon_0.0.2_1692187438589_0.3841220308928457"},"_hasShrinkwrap":false},"0.0.3":{"name":"@apan222/svelte-icon","version":"0.0.3","description":"Component for SVG-icons in svelte","license":"MIT","author":{"name":"Rasmus Jacklin"},"repository":{"type":"git","url":"git+https://github.com/02rasjac/svelte-icon-ts.git"},"keywords":["svelte","icon"],"bugs":{"url":"https://github.com/02rasjac/svelte-icon-ts/issues"},"homepage":"https://github.com/02rasjac/svelte-icon-ts#readme","scripts":{"dev":"vite dev","build":"vite build && npm run package","preview":"vite preview","package":"svelte-kit sync && svelte-package && publint","prepublishOnly":"npm run package","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","lint":"prettier --plugin-search-dir . --check . && eslint .","format":"prettier --plugin-search-dir . --write ."},"exports":{".":{"types":"./dist/SvgIcon.svelte.d.ts","svelte":"./dist/SvgIcon.svelte"}},"peerDependencies":{"svelte":"^4.0.0"},"devDependencies":{"@sveltejs/adapter-auto":"^2.0.0","@sveltejs/kit":"^1.20.4","@sveltejs/package":"^2.0.0","@typescript-eslint/eslint-plugin":"^5.45.0","@typescript-eslint/parser":"^5.45.0","eslint":"^8.28.0","eslint-config-prettier":"^8.5.0","eslint-plugin-svelte":"^2.30.0","prettier":"^2.8.0","prettier-plugin-svelte":"^2.10.1","publint":"^0.1.9","svelte":"^4.0.5","svelte-check":"^3.4.3","tslib":"^2.4.1","typescript":"^5.0.0","vite":"^4.4.2"},"types":"./dist/index.d.ts","type":"module","_id":"@apan222/svelte-icon@0.0.3","gitHead":"b7c192e681d24da3728a0f9ed381cba3a3c8d668","_nodeVersion":"18.17.1","_npmVersion":"9.8.1","dist":{"integrity":"sha512-sZ/8Az1qXGBjGXfvFkhTj3ZWzdBVWkV10MvjIp7qiOYP4xuTE6oYsAeq0w7+7UF+k6p3JposzdrfVf7ze7+XQw==","shasum":"d2dea199945e185d5444829d5c8a41384b8e30fc","tarball":"https://registry.npmjs.org/@apan222/svelte-icon/-/svelte-icon-0.0.3.tgz","fileCount":7,"unpackedSize":6616,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEvV/hTwPCt1XLVYrwROZidrPwEdDtPckLeZrMQuyZr8AiEA9tKUsMJ+V42R/jkY4xSYstFTc3cDqeiQCS2UZj5V7WU="}]},"_npmUser":{"name":"apan222","email":"Rasmusjacklin2002@gmail.com"},"directories":{},"maintainers":[{"name":"apan222","email":"Rasmusjacklin2002@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-icon_0.0.3_1692189402563_0.6600848678763354"},"_hasShrinkwrap":false}},"time":{"created":"2023-08-16T11:52:38.371Z","0.0.1":"2023-08-16T11:52:38.614Z","modified":"2023-08-16T12:36:42.935Z","0.0.2":"2023-08-16T12:03:58.809Z","0.0.3":"2023-08-16T12:36:42.741Z"},"maintainers":[{"name":"apan222","email":"Rasmusjacklin2002@gmail.com"}],"description":"Component for SVG-icons in svelte","homepage":"https://github.com/02rasjac/svelte-icon-ts#readme","keywords":["svelte","icon"],"repository":{"type":"git","url":"git+https://github.com/02rasjac/svelte-icon-ts.git"},"author":{"name":"Rasmus Jacklin"},"bugs":{"url":"https://github.com/02rasjac/svelte-icon-ts/issues"},"license":"MIT","readme":"# Icon-component for Svelte\n\nThis is a simple component to render an SVG-icon in svelte. **NOTE:** It is basically a _typescript_-version of [svelte-icon by Pictogrammers](https://github.com/Pictogrammers/svelte-icon/tree/main).\n\n## Usage\n\n1. Install:\n\n   ```\n   npm install @apan222/svelte-icon\n   ```\n\n2. Import:\n\n   ```ts\n   import SvgIcon from '@apan222/svelte-icon';\n   ```\n\n3. Use the component like any other svelte-component, i.e:\n\n   ```html\n   <SvgIcon path=\"M19,6.41L17.59,5L7,15.59V9H5V19H15V17H8.41L19,6.41Z\" flip=\"horizontal\" />\n   ```\n\n## Props\n\n| Name      | Default      | Description                                                                                                                                 |\n| --------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |\n| `path`    | **Required** | SVG-path to render.                                                                                                                         |\n| `size`    | 24           | The side-length (square) of the icon.                                                                                                       |\n| `viewBox` | '0 0 24 24'  | The SVG viewport coordinates for the current SVG fragment. Same as html `<svg/>`.                                                           |\n| `flip`    | 'none'       | Flip the icon. **Options:** `'vertical'`, `'horizontal'`, `'both'` and `'none'`.                                                            |\n| `rotate`  | '0deg'       | Allows rotation of the icon. Any string containing valid _CSS_-angle is valid, i.e `'90deg'` and `'0.25turn'` results in the same rotation. |\n\nFurthermore, any other attributes that can be used on an html `<svg />`-element can be used. Examples could be `fill`, `stroke` and `aria-label`. It is recommended for accessibility-reasons to include a `aria-label` or `aria-labelledby` so screenreaders can tell what the icon means.\n\n## Style\n\nBy default, the `fill` is set to `currentColor`. However, you can change it by explicitly adding a `fill`-attribute, or add a global `class` and style it through that. For examples:\n\n```html\n<div style=\"color: white; background-color: #333\">\n\t<h2>Colors</h2>\n\t<SvgIcon {path} />\n\t<SvgIcon {path} fill=\"red\" />\n\t<SvgIcon {path} class=\"custom-class\" />\n</div>\n\n<style>\n\t:global(.custom-class) {\n\t\tfill: pink;\n\t}\n</style>\n```\n\nResult:\n![Example of three x's with different colors](/static/result_colors.png)\n","readmeFilename":"README.md"}