{"id":20112270,"url":"https://github.com/swiftaff/rollup-plugin-iconify-svg","last_synced_at":"2026-06-08T12:04:39.754Z","repository":{"id":65491321,"uuid":"304080774","full_name":"Swiftaff/rollup-plugin-iconify-svg","owner":"Swiftaff","description":null,"archived":false,"fork":false,"pushed_at":"2021-06-06T05:46:31.000Z","size":1589,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-13T06:19:11.600Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Swiftaff.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-10-14T16:58:45.000Z","updated_at":"2021-06-06T05:46:34.000Z","dependencies_parsed_at":"2023-01-25T18:45:35.513Z","dependency_job_id":null,"html_url":"https://github.com/Swiftaff/rollup-plugin-iconify-svg","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Swiftaff%2Frollup-plugin-iconify-svg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Swiftaff%2Frollup-plugin-iconify-svg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Swiftaff%2Frollup-plugin-iconify-svg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Swiftaff%2Frollup-plugin-iconify-svg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Swiftaff","download_url":"https://codeload.github.com/Swiftaff/rollup-plugin-iconify-svg/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241556722,"owners_count":19981874,"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":[],"created_at":"2024-11-13T18:19:37.487Z","updated_at":"2026-06-08T12:04:39.722Z","avatar_url":"https://github.com/Swiftaff.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# rollup-plugin-iconify-svg (Markup Exporter)\n\n[![github-package.json-version](https://img.shields.io/github/package-json/v/Swiftaff/rollup-plugin-iconify-svg?style=social\u0026logo=github)](https://github.com/Swiftaff/rollup-plugin-iconify-svg) [![The MIT License](https://img.shields.io/badge/license-MIT-orange.svg?style=flat-square)](http://opensource.org/licenses/MIT)\n[![CircleCI](https://circleci.com/gh/Swiftaff/rollup-plugin-iconify-svg.svg?style=svg)](https://circleci.com/gh/Swiftaff/rollup-plugin-iconify-svg)\n\n## Purpose\n\nAn experimental rollup plugin to run [svelte-iconify-svg](https://github.com/Swiftaff/svelte-iconify-svg)\n\nIf you're trying out different icons, or icon collections in your project - it takes time to find and include the right files in your template whether they are fonts or SVGs or images. Yes it's great to be able to search for icons from multiple icon sets in https://iconify.design but even then you usually need to export each icon - or use their (very nice) [Iconify API](https://docs.iconify.design/sources/api/) to dynamically include them.\n\nBut what if you're app works offline, or is embedded, or you just don't want to call another CDN script for every page load, when you just want to try out a couple of icons.\n\n## Fast dev experience - immediately use and see Iconify icons in your app!\n\nThis plugin allows you to simply type an icon reference into your svelte app code, hit save, and reload the page to view the auto-bundled icon svg markup!\n\n## How it works\n\nChecks the contents of all your files in the supplied 'src' directories for any references to 'iconify' icons.\ni.e. any text in the format 'alphanumericordashes colon alphanumericordashes' such as `fa:random` or `si-glyph:pin-location-2`\nIt then uses the [Iconify API](https://docs.iconify.design/sources/api/) to generate markup for each icon reference found, then the plugin simply saves a .js file which exports an `icons` object of them all, which gets auto-bundled into your app.\n\n## Installation\n\n```\nnpm i rollup-plugin-iconify-svg --save-dev\n```\n\n### Add to rollup.config.js\n\n```\n// ...other rollup imports\n\nimport rolluppluginiconifysvg from \"rollup-plugin-iconify-svg\";\n\nexport default {\n\n  // ...other rollup config\n\n  plugins: [\n    rolluppluginiconifysvg({\n        targets: [{ src: \"src\", dest: \"src/icons.js\" }],\n    }),\n\n    // ...other rollup plugins\n\n    // If you are using livereload, you may need to add a 'delay' to allow some time for the icons file to be created\n    !production \u0026\u0026 livereload({ watch: \"public\", delay: 1000 }),\n\n    // If you are using watch, you may need to exclude the dest file(s) to avoid recursive watching!\n    watch: {\n      clearScreen: false,\n      exclude:[\"src/icons.js\"]\n    },\n\n    ]\n};\n\n```\n\n### Rollup plugin options\n\n-   targets: an array of options for each set of icons you wish to save. Normally just one.\n    -   src: either a path (string) to the folder to search, or array of paths (strings). If undefined it will default to 'src'\n    -   dest: the filepath (string) where you want the icons saved\n    -   if the dest is a directory rather than a file ending in \".js\" then the plugin will run in experimental mode to save SVGs as files for embedding, instead of the default JS object. Not able to automatically style svg colours with this approach though.\n-   commonJs: By default is false so you can easily embed your icons into svelte using ES6 import syntax, but set it to true if you wish to 'require' the file instead\n-   alwaysSave: forces the iconify API network call and re-save of the icons file, instead of the default which will skip these if the icons list has not changed\n-   recursive: recursively searches within each input directory, instead of the default which will only search within the first level of input directories\n-   logging: controls the amount of console.logs. Leave it on to help with debugging, or reduce if it's getting too noisy for your workflow, options are 'all'|true, 'some', 'none'|false\n-   transform: fix for when some of your font awesome icons are reversed. Default is false. Set to true to enabled vertical or horizontal flipping for a small subset of fa icons such as fa:chevron-right and fa:arrow-circle-down. Introduced in 2.2.3\n\n### Example usage in svelte using the @html feature\n\nThe simplest project would be similar to example 1 in Working Examples below\n\n```\n// ./src/App.svelte\n\u003cscript\u003e\nimport icons from \"./src/icons.js\"; // this is the 'dest' file which the plugin has generated\n\u003c/script\u003e\n\n{@html icons[\"fa:random\"]}\n```\n\nSo in this simple example, assuming you have set 'src' as the 'src' directory and 'src/icons.js' as the 'dest' in the rollup plugin options - then\n\n-   each time you save a file - rollup will run this plugin\n-   the \"fa:random\" text above would be found within this App.svelte file (because it's in the src directory)\n-   the icons.js file would be auto-generated during bundling\n-   rollup will then reload the page and the icon would be displayed by svelte in the @html tag\n-   all in one smooth step!\n\n## Quickly adding/replacing Iconify icons...\n\n1. Go to Iconify and search for another icon from any collection - mix-and-match as much as you like! e.g. https://iconify.design/icon-sets/?query=emoji\n2. Find an icon you like, e.g. https://iconify.design/icon-sets/line-md/emoji-grin.html\n3. The icon reference you need is in the format 'collection-name:icon-name'\n4. So if you then add `{@html icons[\"line-md:emoji-grin\"]}` to the App.svelte file above, hit save, your dev build will auto-refresh showing the new icon!\n\n## Working examples\n\n1. Clone this repo\n2. Basic test: Run `npm run test_dev` and visit `localhost:5000` to build and view the first example and auto-generate the icon file `/example/src/icons.js` (like the example described above)\u003cbr /\u003e\n   https://github.com/Swiftaff/rollup-plugin-iconify-svg/tree/master/example\n3. More features: Run `npm run test2_dev` and visit `localhost:5001` to build the second example and auto-generate 2 icon files `/example2/src/subfolder/icons1.js` \u0026 `/example2/src/icons2.js`. This is because of the array of 2 x targets in rollup.config.js - for when you wish to generate multiple icon files for different parts of your app.\u003cbr /\u003e\u003cbr /\u003e\n   https://github.com/Swiftaff/rollup-plugin-iconify-svg/tree/master/example2\n\n    This example also shows some basic ways to colour and size your icons using CSS\n\n    And if you see 'undefined' appearing in your UI, like in this example - you may have an icon name typo. Just check the generated icons.js file - at the top and it should list any errors, as you can see in `/example2/src/subfolder/icons1.js`.\n\n```\n/*\nx ERROR no such icon prefix 'emojione-wrong:' - in these icon names ('emojione-wrong:speak-no-evil-monkey')\nx ERROR no such icon name   'emojione:hear-no-evil-monkey-wrong'\n*/\n```\n\n## Versions below 2.0.0\n\nThe latest version is recommended, but if you do wish to use earlier versions please note the import syntax changed from 2.0.0 onwards to the above import syntax. Earlier versions use this syntax instead...\n\n```\nimport { icons }  from \"./src/icons.js\";\n```\n\nAnd if you have issues with a clean first build of your app, where it expects the icons.js file(s) to already exists and won't build because they are missing e.g. via github Actions or other automated build process, you can try this workaround to simply add a placeholder for the expected built icon file(s),\n\ne.g. in example 1 you would add `example/src/icons.js`\u003cbr /\u003e\nand for example 2, you would add these files `example2/src/subfolder/icons.js` and `example2/src/icons1.js`\u003cbr /\u003e\nThese placeholders can be a copy of a previously built version of the final files, or maybe just an empty export to then allow the build process to proceed and re-generate them...\n\n```\nexport default = {};\n```\n\nThis should be working in v2 upwards, but please report any issues.\n\n## Notes\n\nThis plugin obviously inlines each instance of the SVG on the page - so probably not recommended if you are using hundreds of icons! But you can split them into multiple files if that helps.\n\nUsing inline mono SVGs (rather than via separate svg files in object or img tags or via css background-image) does mean they can inherit the colour from CSS for easy icon colouring :-) See example2 above\n\n## License\n\nThis project is licensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswiftaff%2Frollup-plugin-iconify-svg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fswiftaff%2Frollup-plugin-iconify-svg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswiftaff%2Frollup-plugin-iconify-svg/lists"}