{"id":16701118,"url":"https://github.com/scriptex/svg-symbol-sprite","last_synced_at":"2025-05-12T14:45:44.187Z","repository":{"id":38313645,"uuid":"434552666","full_name":"scriptex/svg-symbol-sprite","owner":"scriptex","description":"A script to generate a symbol sprite from SVG files","archived":false,"fork":false,"pushed_at":"2025-05-02T11:44:26.000Z","size":1170,"stargazers_count":17,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-12T02:43:45.020Z","etag":null,"topics":["sprite-generator","spritesheet","svg-icons","svg-sprites"],"latest_commit_sha":null,"homepage":"https://atanas.info/portfolio/open-source/svg-symbol-sprite","language":"TypeScript","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/scriptex.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["scriptex"],"patreon":"atanas","open_collective":null,"ko_fi":"scriptex","tidelift":"npm/svg-symbol-sprite","community_bridge":null,"liberapay":"scriptex","issuehunt":"scriptex","otechie":null,"custom":["paypal.me/scriptex","revolut.me/scriptex"]}},"created_at":"2021-12-03T10:17:22.000Z","updated_at":"2025-05-02T11:44:28.000Z","dependencies_parsed_at":"2024-01-15T09:44:01.502Z","dependency_job_id":"f72b9984-a055-4970-ad9c-6d9274f1eee1","html_url":"https://github.com/scriptex/svg-symbol-sprite","commit_stats":{"total_commits":419,"total_committers":6,"mean_commits":69.83333333333333,"dds":"0.21479713603818618","last_synced_commit":"6174727cc373ce32af24da6c24ba3c8622b9fbc4"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptex%2Fsvg-symbol-sprite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptex%2Fsvg-symbol-sprite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptex%2Fsvg-symbol-sprite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptex%2Fsvg-symbol-sprite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scriptex","download_url":"https://codeload.github.com/scriptex/svg-symbol-sprite/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253757581,"owners_count":21959436,"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":["sprite-generator","spritesheet","svg-icons","svg-sprites"],"created_at":"2024-10-12T18:28:49.102Z","updated_at":"2025-05-12T14:45:43.958Z","avatar_url":"https://github.com/scriptex.png","language":"TypeScript","readme":"[![Github Build](https://github.com/scriptex/svg-symbol-sprite/workflows/Build/badge.svg)](https://github.com/scriptex/svg-symbol-sprite/actions?query=workflow%3ABuild)\n[![Codacy Badge](https://app.codacy.com/project/badge/Grade/34d3d75710534dc6a38c3584a1dcd068)](https://www.codacy.com/gh/scriptex/svg-symbol-sprite/dashboard?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=scriptex/svg-symbol-sprite\u0026utm_campaign=Badge_Grade)\n[![Codebeat Badge](https://codebeat.co/badges/d765a4c8-2c0e-44f2-89c3-fa364fdc14e6)](https://codebeat.co/projects/github-com-scriptex-svg-symbol-sprite-master)\n[![CodeFactor Badge](https://www.codefactor.io/repository/github/scriptex/svg-symbol-sprite/badge)](https://www.codefactor.io/repository/github/scriptex/svg-symbol-sprite)\n[![DeepScan grade](https://deepscan.io/api/teams/3574/projects/5257/branches/40799/badge/grade.svg)](https://deepscan.io/dashboard#view=project\u0026tid=3574\u0026pid=5257\u0026bid=40799)\n[![Analytics](https://ga-beacon-361907.ew.r.appspot.com/UA-83446952-1/github.com/scriptex/svg-symbol-sprite/README.md?pixel)](https://github.com/scriptex/svg-symbol-sprite/)\n\n# SVG Symbol Sprite\n\n\u003e Create an SVG symbol sprite from your SVG files.\n\n![GitHub stars](https://img.shields.io/github/stars/scriptex/svg-symbol-sprite?style=social)\n![GitHub forks](https://img.shields.io/github/forks/scriptex/svg-symbol-sprite?style=social)\n![GitHub watchers](https://img.shields.io/github/watchers/scriptex/svg-symbol-sprite?style=social)\n![GitHub followers](https://img.shields.io/github/followers/scriptex?style=social)\n\n## Code stats\n\n![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/scriptex/svg-symbol-sprite)\n![GitHub repo size](https://img.shields.io/github/repo-size/scriptex/svg-symbol-sprite?style=plastic)\n![GitHub language count](https://img.shields.io/github/languages/count/scriptex/svg-symbol-sprite?style=plastic)\n![GitHub top language](https://img.shields.io/github/languages/top/scriptex/svg-symbol-sprite?style=plastic)\n![GitHub last commit](https://img.shields.io/github/last-commit/scriptex/svg-symbol-sprite?style=plastic)\n\nA Node.js CLI tool which creates an optimized SVG symbol sprite out of a folder full of SVG files.\n\nProvides handy defaults so you don't have to waste time.\n\nAll available options can be tweaked. You can even supply your own SVGO config.\n\n**This tool is heavily inspried by [sprite.sh](https://github.com/edenspiekermann/sprite.sh)**\n\n## Installation\n\n```sh\nnpm i svg-symbol-sprite -g\n\n# or\n\nyarn global add svg-symbol-sprite\n```\n\n## Options\n\n| Argument          | Description                                      | Default value                              |\n| ----------------- | ------------------------------------------------ | ------------------------------------------ |\n| `-i`, `--input`   | Specifies input dir                              | \".\" (current directory)                    |\n| `-o`, `--output`  | Specifies output file                            | \"./sprite.svg\"                             |\n| `-v`, `--viewbox` | Specifies viewBox attribute                      | (parsed from each icon)                    |\n| `-p`, `--prefix`  | Specifies prefix for id attribute                | \"icon-\"                                    |\n| `-c`, `--config`  | Absolute path to the SVGO config file or \"false\" | -                                          |\n| `-a`, `--attrs`   | Attributes for the SVG element                   | \"aria-hidden=\"true\"\"                       |\n| `-s`, `--style`   | Inline style for the SVG element                 | \"width: 0; height: 0; position: absolute;\" |\n\n```sh\nUsage: svg-symbol-sprite [options]\n\nOptions:\n    -i, --input     Specifies input dir (current dir by default)\n    -o, --output    Specifies output file (\"./sprite.svg\" by default)\n    -v, --viewbox   Specifies viewBox attribute (parsed by default)\n    -p, --prefix    Specifies prefix for id attribute (\"icon-\" by default)\n    -c, --config    Absolute path to the SVGO config file or \"false\"\n    -a, --attrs     Attributes for the SVG element ('xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\"' by default)\n    -s, --style     Inline style for the SVG element (\"width: 0; height: 0; position: absolute;\" by default)\n```\n\n## Usage as a package.json script\n\nThe tool can be also used as a `package.json` script. You need to add it to the `devDependencies` of your project's `package.json`.\n\n```json\n{\n\t\"scripts\": {\n\t\t\"svg-sprite\": \"svg-symbol-sprite -i ./assets/svgs -o ./dist/sprite.svg\"\n\t}\n}\n```\n\n```sh\nnpm run svg-sprite\n\n# or\n\nyarn svg-sprite\n```\n\n## Usage without installation (with `npx`)\n\nThe tool can be also used without installing it:\n\n```sh\nnpx svg-symbol-sprite -i ./assets/svgs -o ./dist/sprite.svg\n```\n\n## SVG Optimization\n\n`svg-symbol-sprite` optimizes the input SVG files using [SVGO](https://github.com/svg/svgo) and an opinionated configuration file. In order to customize the SVGO config, one can do so by using the `-c` or `--config` option and an absolute path to the SVGO config file.\n\n**If you wish to completely disable the SVGO files optimization, pass \"false\" to the `--config` option.**\n\n## Accessibility\n\n`svg-symbol-sprite` does not help with SVG icons' accessibility. This is your responsibility as a developer - you should make sure that your SVGs contain relevant `title` and `id` attributes.\n\n## LICENSE\n\nMIT\n\n---\n\n\u003cdiv align=\"center\"\u003e\n    Connect with me:\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://atanas.info\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/logo.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"mailto:hi@atanas.info\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/email.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://www.linkedin.com/in/scriptex/\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/linkedin.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://github.com/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/github.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://gitlab.com/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/gitlab.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://twitter.com/scriptexbg\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/twitter.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://www.npmjs.com/~scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/npm.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://www.youtube.com/user/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/youtube.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://stackoverflow.com/users/4140082/atanas-atanasov\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/stackoverflow.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://codepen.io/scriptex/\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/codepen.svg\" width=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://profile.codersrank.io/user/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/codersrank.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://linktr.ee/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/linktree.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\n---\n\n\u003cdiv align=\"center\"\u003e\nSupport and sponsor my work:\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca href=\"https://twitter.com/intent/tweet?text=Checkout%20this%20awesome%20developer%20profile%3A\u0026url=https%3A%2F%2Fgithub.com%2Fscriptex\u0026via=scriptexbg\u0026hashtags=software%2Cgithub%2Ccode%2Cawesome\" title=\"Tweet\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Tweet-Share_my_profile-blue.svg?logo=twitter\u0026color=38A1F3\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://paypal.me/scriptex\" title=\"Donate on Paypal\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Donate-Support_me_on_PayPal-blue.svg?logo=paypal\u0026color=222d65\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://revolut.me/scriptex\" title=\"Donate on Revolut\"\u003e\n\t\u003cimg src=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/revolut.json\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://patreon.com/atanas\" title=\"Become a Patron\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Become_Patron-Support_me_on_Patreon-blue.svg?logo=patreon\u0026color=e64413\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://ko-fi.com/scriptex\" title=\"Buy Me A Coffee\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Donate-Buy%20me%20a%20coffee-yellow.svg?logo=ko-fi\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://liberapay.com/scriptex/donate\" title=\"Donate on Liberapay\"\u003e\n\t\u003cimg src=\"https://img.shields.io/liberapay/receives/scriptex?label=Donate%20on%20Liberapay\u0026logo=liberapay\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/bitcoin.json\" title=\"Donate Bitcoin\"\u003e\n\t\u003cimg src=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/bitcoin.json\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/etherium.json\" title=\"Donate Etherium\"\u003e\n\t\u003cimg src=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/etherium.json\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/shiba-inu.json\" title=\"Donate Shiba Inu\"\u003e\n\t\u003cimg src=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/shiba-inu.json\" /\u003e\n\u003c/a\u003e\n\u003c/div\u003e\n","funding_links":["https://github.com/sponsors/scriptex","https://patreon.com/atanas","https://ko-fi.com/scriptex","https://tidelift.com/funding/github/npm/svg-symbol-sprite","https://liberapay.com/scriptex","https://issuehunt.io/r/scriptex","paypal.me/scriptex","revolut.me/scriptex","https://paypal.me/scriptex","https://liberapay.com/scriptex/donate"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscriptex%2Fsvg-symbol-sprite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscriptex%2Fsvg-symbol-sprite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscriptex%2Fsvg-symbol-sprite/lists"}