{"id":14962589,"url":"https://github.com/cweili/svelte-fa","last_synced_at":"2025-04-13T01:59:26.644Z","repository":{"id":34923067,"uuid":"190691389","full_name":"Cweili/svelte-fa","owner":"Cweili","description":"Tiny FontAwesome component for Svelte","archived":false,"fork":false,"pushed_at":"2025-03-20T06:14:38.000Z","size":463,"stargazers_count":401,"open_issues_count":9,"forks_count":26,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-13T01:59:20.366Z","etag":null,"topics":["component","font-awesome","fontawesome","icon","svelte","sveltejs","svg","svg-icons"],"latest_commit_sha":null,"homepage":"https://cweili.github.io/svelte-fa/","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Cweili.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-06-07T05:12:11.000Z","updated_at":"2025-04-11T12:09:21.000Z","dependencies_parsed_at":"2023-11-23T07:25:09.049Z","dependency_job_id":"265eb8fa-efd0-4cf5-be2a-21a8bc573fda","html_url":"https://github.com/Cweili/svelte-fa","commit_stats":{"total_commits":203,"total_committers":19,"mean_commits":10.68421052631579,"dds":0.5517241379310345,"last_synced_commit":"25ebc2730b225e54e1c01514d0c4bc1f209db83c"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cweili%2Fsvelte-fa","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cweili%2Fsvelte-fa/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cweili%2Fsvelte-fa/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cweili%2Fsvelte-fa/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Cweili","download_url":"https://codeload.github.com/Cweili/svelte-fa/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248654046,"owners_count":21140235,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","font-awesome","fontawesome","icon","svelte","sveltejs","svg","svg-icons"],"created_at":"2024-09-24T13:30:05.691Z","updated_at":"2025-04-13T01:59:26.617Z","avatar_url":"https://github.com/Cweili.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-fa\n\n[![npm][badge-version]][npm]\n[![bundle size][badge-size]][bundlephobia]\n[![npm downloads][badge-downloads]][npm]\n[![license][badge-license]][license]\n\n\n[![github][badge-issues]][github]\n[![build][badge-build]][workflows]\n[![coverage][badge-coverage]][coveralls]\n\nTiny [FontAwesome][fontawesome] component for [Svelte][svelte].\n\n* FontAwesome version 5 and 6\n* FontAwesome svg icons\n* Tree-shakable, only import used icons\n* No CSS file required\n* FontAwesome layering\n* FontAwesome duotone icons\n\n[Documents and examples][doc].\n\n## Installation\n\n```shell\nnpm install svelte-fa\n```\n\nInstall FontAwesome icons via [official packages][fontawesome-npm], for example:\n\n```shell\nnpm install @fortawesome/free-solid-svg-icons\nnpm install @fortawesome/free-brands-svg-icons\n```\n\nIcons gallery: [FontAwesome icons][fontawesome-icons]\n\n### Work with [Sapper][sapper]\n\nYou may need to install the component as a devDependency:\n\n```shell\nnpm install svelte-fa -D\n```\n\n### Work with [SvelteKit][sveltekit]/[Vite][vite]\n\nYou may need to import the component explicitly as below:\n\n```js\nimport Fa from 'svelte-fa/dist/fa.svelte'\nimport { faCaretDown, faCaretUp } from '@fortawesome/free-solid-svg-icons/index.es'\n```\n\nWhen using typescript with SvelteKit/Vite, you may also needed to add type definitions that redirect to the non-`index.es` export:\n\n```ts\n// app.d.ts\ndeclare module '@fortawesome/pro-solid-svg-icons/index.es' {\n  export * from '@fortawesome/pro-solid-svg-icons';\n}\n```\n\n## Usage\n\n```html\n\u003cscript\u003e\nimport Fa from 'svelte-fa'\nimport { faFlag } from '@fortawesome/free-solid-svg-icons'\nimport { faGithub } from '@fortawesome/free-brands-svg-icons';\n\u003c/script\u003e\n\n\u003cFa icon={faFlag} /\u003e\n\u003cFa icon={faGithub} /\u003e\n```\n\n## `Fa` Properties\n\n```html\n\u003cFa\n  icon={faFlag}\n  class=\"bg-gold\"\n  size=\"2x\"\n  color=\"#ff0000\"\n  fw\n  pull=\"left\"\n  scale={1.2}\n  translateX={0.2}\n  translateY={0.2}\n  rotate={90}\n  flip=\"horizontal\"\n  spin\n  pulse\n/\u003e\n```\n\n* `icon`: icon from [FontAwesome packages][fontawesome-npm], for example: `@fortawesome/free-solid-svg-icons`, icons gallery: [FontAwesome icons][fontawesome-icons]\n* `class`: `string` values `${your preffered any css class}`\n* `size`: `string` values `xs`, `sm`, `lg` or `2x`, `3x`, `4x`, ..., `${number}x`\n* `color`: `string` icon color, default `currentColor`\n* `fw`: `boolean` fixed width\n* `pull`: `string` values `left`, `right`\n* `scale`: `number | string` transform scale, unit is `em`, default `1`\n* `translateX`: `number | string` transform position X, unit is `em`, default `0`\n* `translateY`: `number | string` transform position Y, unit is `em`, default `0`\n* `flip`: `string` values `horizontal`, `vertical`, `both`\n* `rotate`: `number | string` values `90`, `180`, `270`, `30`, `-30` ...\n* `spin`: `boolean` spin icons\n* `pulse`: `boolean` pulse spin icons\n\n## Layering \u0026amp; Text\n\n```js\nimport Fa, {\n  FaLayers,\n  FaLayersText,\n} from 'svelte-fa';\n```\n\n```html\n\u003cFaLayers\n  size=\"4x\"\n  pull=\"left\"\n\u003e\n  \u003cFa icon={faCertificate} /\u003e\n  \u003cFaLayersText\n    scale={0.25}\n    rotate={-30}\n    color=\"white\"\n    style=\"font-weight: 900\"\n  \u003e\n    NEW\n  \u003c/FaLayersText\u003e\n\u003c/FaLayers\u003e\n```\n\n### `FaLayers` Properties\n\n* `size`: `string` values `xs`, `sm`, `lg` or `2x`, `3x`, `4x`, ..., `${number}x`\n* `pull`: `string` values `left`, `right`\n\n### `FaLayersText` Properties\n\n* `size`: `string` values `xs`, `sm`, `lg` or `2x`, `3x`, `4x`, ..., `${number}x`\n* `color`: `string` icon color, default `currentColor`\n* `scale`: `number | string` transform scale, unit is `em`, default `1`\n* `translateX`: `number | string` transform position X, unit is `em`, default `0`\n* `translateY`: `number | string` transform position Y, unit is `em`, default `0`\n* `flip`: `string` values `horizontal`, `vertical`, `both`\n* `rotate`: `number | string` values `90`, `180`, `270`, `30`, `-30` ...\n\n## Duotone Icons\n\n```html\n\u003cscript\u003e\nimport Fa from 'svelte-fa'\nimport { faFlag } from '@fortawesome/pro-duotone-svg-icons'\n\u003c/script\u003e\n\n\u003cFa\n  icon={faFlag}\n  primaryColor=\"red\"\n  secondaryColor=\"#000000\"\n  primaryOpacity={0.8}\n  secondaryOpacity={0.6}\n  swapOpacity\n/\u003e\n```\n\n### Duotone Icons Theme\n\n```html\n\u003cscript\u003e\nimport Fa from 'svelte-fa'\nimport { faFlag } from '@fortawesome/pro-duotone-svg-icons'\n\nconst theme = {\n  primaryColor: 'red',\n  secondaryColor: '#000000',\n  primaryOpacity: 0.8,\n  secondaryOpacity: 0.6,\n}\n\u003c/script\u003e\n\n\u003cFa\n  icon={faFlag}\n  {...theme}\n/\u003e\n```\n\n## Contributors\n\n\u003c!-- readme: collaborators,contributors -start --\u003e\n\u003ctable\u003e\n\u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/Cweili\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/2128450?v=4\" width=\"100;\" alt=\"Cweili\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eCweili\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/marekdedic\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/3134692?v=4\" width=\"100;\" alt=\"marekdedic\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eMarek Dědič\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/gtm-nayan\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/50981692?v=4\" width=\"100;\" alt=\"gtm-nayan\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eGtmnayan\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/ItzaMi\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/30603437?v=4\" width=\"100;\" alt=\"ItzaMi\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eRui Sousa\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/theodorejb\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/3053271?v=4\" width=\"100;\" alt=\"theodorejb\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eTheodore Brown\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/msanguineti\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/19243840?v=4\" width=\"100;\" alt=\"msanguineti\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eMirco Sanguineti\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/RealA10N\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/23400213?v=4\" width=\"100;\" alt=\"RealA10N\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eAlon Krymgand\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/connercsbn\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/65339198?v=4\" width=\"100;\" alt=\"connercsbn\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eConner\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/prokawsar\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/9526172?v=4\" width=\"100;\" alt=\"prokawsar\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eKawsar Ahmed\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/mvolkmann\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/79312?v=4\" width=\"100;\" alt=\"mvolkmann\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eMark Volkmann\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/ModischFabrications\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/25404728?v=4\" width=\"100;\" alt=\"ModischFabrications\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eRobin Modisch\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/RemiKalbe\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/8604600?v=4\" width=\"100;\" alt=\"RemiKalbe\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eRémi Kalbe\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/hawk93\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/3786547?v=4\" width=\"100;\" alt=\"hawk93\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eNull\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\u003c/tr\u003e\n\u003c/table\u003e\n\u003c!-- readme: collaborators,contributors -end --\u003e\n\n[fontawesome-icons]: https://fontawesome.com/icons\n[fontawesome]: https://fontawesome.com/\n[fontawesome-npm]: https://www.npmjs.com/search?q=%40fortawesome%20svg%20icons\n[svelte]: https://svelte.dev/\n[sapper]: https://sapper.svelte.dev/\n[sveltekit]: https://kit.svelte.dev/\n[vite]: https://www.npmjs.com/package/vite\n\n[doc]: https://cweili.github.io/svelte-fa/\n\n[badge-version]: https://img.shields.io/npm/v/svelte-fa.svg\n[badge-downloads]: https://img.shields.io/npm/dt/svelte-fa.svg\n[npm]: https://www.npmjs.com/package/svelte-fa\n\n[badge-size]: https://img.shields.io/bundlephobia/minzip/svelte-fa.svg\n[bundlephobia]: https://bundlephobia.com/result?p=svelte-fa\n\n[badge-license]: https://img.shields.io/npm/l/svelte-fa.svg\n[license]: https://github.com/Cweili/svelte-fa/blob/master/LICENSE\n\n[badge-issues]: https://img.shields.io/github/issues/Cweili/svelte-fa.svg\n[github]: https://github.com/Cweili/svelte-fa\n\n[badge-build]: https://img.shields.io/github/actions/workflow/status/Cweili/svelte-fa/ci.yml?branch=master\n[workflows]: https://github.com/Cweili/svelte-fa/actions/workflows/ci.yml?query=branch%3Amaster\n\n[badge-coverage]: https://img.shields.io/coveralls/github/Cweili/svelte-fa/master.svg\n[coveralls]: https://coveralls.io/github/Cweili/svelte-fa?branch=master\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcweili%2Fsvelte-fa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcweili%2Fsvelte-fa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcweili%2Fsvelte-fa/lists"}