{"id":18303534,"url":"https://github.com/sina-byn/svg-spritify","last_synced_at":"2025-04-05T15:30:59.002Z","repository":{"id":240491702,"uuid":"799210745","full_name":"sina-byn/svg-spritify","owner":"sina-byn","description":"A CLI tool for you to generate SVG sprites ASAP with support for multi-theme and multi-breakpoint configurations","archived":false,"fork":false,"pushed_at":"2024-10-29T11:04:07.000Z","size":453,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-21T06:33:25.461Z","etag":null,"topics":["asset-management","automation","css","css-generator","css-sprites","icon-generator","icons","sprite-generator","sprites","svg","svg-icon","svg-icons","svg-sprites","svg-to-css"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/svg-spritify","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/sina-byn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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":"2024-05-11T13:21:25.000Z","updated_at":"2025-01-26T08:30:54.000Z","dependencies_parsed_at":"2024-05-19T09:36:38.973Z","dependency_job_id":"3237691e-4b84-4e2d-a5f6-4bb72322d511","html_url":"https://github.com/sina-byn/svg-spritify","commit_stats":null,"previous_names":["sina-byn/svg-spritify"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sina-byn%2Fsvg-spritify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sina-byn%2Fsvg-spritify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sina-byn%2Fsvg-spritify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sina-byn%2Fsvg-spritify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sina-byn","download_url":"https://codeload.github.com/sina-byn/svg-spritify/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247358451,"owners_count":20926221,"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":["asset-management","automation","css","css-generator","css-sprites","icon-generator","icons","sprite-generator","sprites","svg","svg-icon","svg-icons","svg-sprites","svg-to-css"],"created_at":"2024-11-05T15:25:58.000Z","updated_at":"2025-04-05T15:30:58.632Z","avatar_url":"https://github.com/sina-byn.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svg-spritify [![NPM version](https://img.shields.io/npm/v/svg-spritify.svg?style=flat)](https://www.npmjs.com/package/svg-spritify) [![NPM monthly downloads](https://img.shields.io/npm/dm/svg-spritify.svg?style=flat)](https://npmjs.org/package/svg-spritify) [![NPM total downloads](https://img.shields.io/npm/dt/svg-spritify.svg?style=flat)](https://npmjs.org/package/svg-spritify) \n\n\u003e Creating SVG sprites has never been this easy. Easily generate sprites out of your SVG files.\n\nA CLI tool for you to generate SVG sprites ASAP with support for multi-theme and multi-breakpoint configurations\n\nPlease consider following this project's author, [Sina Bayandorian](https://github.com/sina-byn), and consider starring the project to show your :heart: and support.\n\n## Table of Contents\n\n- [Install](#install)\n- [Usage](#usage)\n- [Configuration](#configuration)\n    - [Config Variants - Must-Read ⚠️](#config-variants)\n    - [Theming](#theming)\n    - [Breakpoint Utils](#breakpoint-utils)\n    - [Demo](#demo)\n\n## Install\n\nInstall with [npm](https://www.npmjs.com/package/svg-spritify) :\n\n```sh\n$ npm install -g svg-spritify\n```\n\n## Usage\n\n```sh\n$ npx sprite\n```\n\n## Configuration\n\nThis CLI comes with a proper default config that can be completely customized to best fit your needs. In order to override the default configuration you need to create a `sprite.config.json` at the root of your project :\n\n|      Name       |                  Type                   |                 Default                  |                            Description                             |\n|:-----------------|:-----------------------------------------|:------------------------------------------|:--------------------------------------------------------------------|\n|     rootDir     |                 string                  |                 \"icons\"                  |         the directory where you should put your SVG icons          |\n|     outDir      |                 string                  |                \".output\"                 |    the directory where sprite SVG(s) and CSS will be generated     |\n|      tag        |                 string                  |               no HTML tag                |          the HTML tag to be added to the generated CSS             |\n|    filename     |                 string                  |                 \"sprite\"                 |                   output SVG files' prefix name                    |\n|    className    |                 string                  |                 \"sprite\"                 |        the className to be used for both CSS and SVG files         |\n|      media      |                  \"min\"                  |                  \"max\"                   |                               \"min\"                                |\n|     themes      |                string[ ]                |                [\"light\"]                 |           the themes that you want your icons to support           |\n|  defaultTheme   |                 string                  |                themes[0]                 |         the default theme of your icons - explained below          |\n|   breakpoints   |        { [bp: string]: number }         |                   { }                    |             the breakpoints used for responsive icons              |\n| breakpointUtils |                 boolean                 |                   true                   | if set to true, outputs per-breakpoint CSS utils - explained below |\n|       css       | { minify?: boolean; filename?: string } |  { minify: false, filename: 'sprite' }   |                      output CSS configuration                      |\n|      demo       |                 boolean                 |      { [theme: string]: hex_color }      |                               false                                |\n|   typescript    |                 boolean | { filename?: string; typeName?: string }                 | { filename?: string; typeName?: string } |   outputs a TypeScript type for icon names unless set to `false`   |\n\n### Config Variants\n\nThis CLI in its core has a function called `resolvePaths` that is responsible for resolving the `inputs` and `outputs` based the config variant you provide. There can be 4 different config variants based on how you choose to config the CLI :\n\n- single theme - single breakpoint\nplace your SVG icons directly inside the `rootDir`.\n    - `rootDir`\n\n- single theme - multi breakpoint\nyou need one sub-folder per `breakpoint` directly inside the `rootDir` - the SVG icons of each breakpoint should be placed directly inside the related sub-folder.\n    - `rootDir/breakpoint`\n\n- multi theme - single breakpoint\nyou need one sub-folder per `theme` directly inside the `rootDir` - the SVG icons of each theme should be placed directly inside the related sub-folder\n    - `rootDir/theme`\n\n- multi theme - multi breakpoint\nyou need one sub-folder per `theme` directly inside the `rootDir`, and then one sub-folder per `breakpoint` directly inside each theme's sub-folder - the breakpoint's sub-folder is where you place the SVG icons\n    - `rootDir/theme/breakpoint`\n\n- When managing multiple breakpoints, it's important to ensure there's a fallback for screen sizes that don't meet any specified conditions. This is achieved by using a `DEFAULT` folder alongside your breakpoint-specific folders.\n    - Suppose you have the following breakpoint configuration `\"lg\": 1024` with the media type set to `min`, the icons inside the `lg` folder will display when the viewport width is `\u003e= 1024px`. For screen sizes below `1024px`, the icons from the `DEFAULT` folder will be used.\n\n### Theming\n\nTheming is implemented using classNames in this package. Once you define your themes inside `sprite.config.json`, the output css will look something like :\n\n```css\n.\u003ctheme\u003e .\u003cicon-name\u003e { ... }\n```\n\nYou can show a given theme's icon by giving a className equal to the theme's name to a parent of the icon.\n\nOne thing to notice is the importance of the `defaultTheme`. There is no className defined for the defaultTheme. There is no className defined for the defaultTheme. The default icons are shown by default as the name implies.\n- Defaults to the first theme if not defined\n\u003cbr /\u003e\n\n### Breakpoint Utils\nIf set to `true`, generates one utility class for each breakpoint to create breakpoint-specific icons. For example, given `\"md\": 768`, we have :\n\n```css\n.sprite-md {\n    display: none;\n}\n\n@media (min-width: 768px) {\n    .sprite-md {\n        display: inline-block;\n    }\n}\n```\n\u003cbr /\u003e\n\n### Demo\n\nIf set to `true`, a `demo.html` will be generated where you can see a list of your icons all at once - it can also be set to an object that accepts strings as keys and hex colors as values, each key is a `theme` specified in the config and each color is the `background-color` that is going to be used once you change the `demo.html` file's theme :\n\n\n```json\n{\n    \"demo\" {\n        \"light\": \"ffffff\",\n        \"dark\": \"303030\"\n    }\n}\n```\nmake sure not to include the `#` in your hex string\n\u003cbr /\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsina-byn%2Fsvg-spritify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsina-byn%2Fsvg-spritify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsina-byn%2Fsvg-spritify/lists"}