{"id":23757552,"url":"https://github.com/scientanl/svg-assets-to-typescript","last_synced_at":"2026-03-17T10:30:16.233Z","repository":{"id":47656529,"uuid":"366343584","full_name":"ScientaNL/svg-assets-to-typescript","owner":"ScientaNL","description":"Scienta's take on svg assets management in Typescript with support for color variants","archived":false,"fork":false,"pushed_at":"2024-08-20T13:01:24.000Z","size":267,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":6,"default_branch":"main","last_synced_at":"2024-12-31T19:48:35.560Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/ScientaNL.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}},"created_at":"2021-05-11T10:31:43.000Z","updated_at":"2024-08-20T13:01:28.000Z","dependencies_parsed_at":"2022-09-25T03:30:44.898Z","dependency_job_id":null,"html_url":"https://github.com/ScientaNL/svg-assets-to-typescript","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/ScientaNL%2Fsvg-assets-to-typescript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ScientaNL%2Fsvg-assets-to-typescript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ScientaNL%2Fsvg-assets-to-typescript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ScientaNL%2Fsvg-assets-to-typescript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ScientaNL","download_url":"https://codeload.github.com/ScientaNL/svg-assets-to-typescript/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239927846,"owners_count":19719836,"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-12-31T19:48:48.618Z","updated_at":"2026-03-17T10:30:16.180Z","avatar_url":"https://github.com/ScientaNL.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SVG Assets to Typescript\n\nConverts SVG files to one tree-shakable typescript definition model, which can be used by a icon library.\n\nAdaptation of the [svg-to-ts](https://github.com/kreuzerk/svg-to-ts) project. The main addition which this project provides for, is an svg\ncoloring workflow. With this workflow, it is possible to have one annotated svg which can be used to render\na svg using *css variables*.\n\n## Workflow\n\n- SVG files must be annotated with properties containing the name of a css variable.\n- A *rc-file* must be added to the svg root, containing the configuration.\n- Run the tool.\n- Implement the definition model in your application.\n\n## Annotating and SVG Parsing\n\nWe use  *Affinity Designer* to manage our Icon Library at Scienta. Each layer which must be thematically colorized is named after the css\nvariable which must be used. When exported, these layer names are preserved by the exporter of Affinity Sesigner.\n\n**Input example:**\n\n```svg\n\u003c?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?\u003e\n\u003c!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\"\u003e\n\u003csvg width=\"100%\" height=\"100%\" viewBox=\"0 0 18 18\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n     xmlns:xlink=\"http://www.w3.org/1999/xlink\" xml:space=\"preserve\" xmlns:serif=\"http://www.serif.com/\"\n     style=\"fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;\"\n\u003e\n  \u003crect serif:id=\"--secondary-color\" x=\"1.029\" y=\"2\" width=\"16\" height=\"2\" style=\"fill:#aaa;\"/\u003e\n  \u003crect serif:id=\"--secondary-color\" x=\"1.029\" y=\"8\" width=\"16\" height=\"2\" style=\"fill:#aaa;\"/\u003e\n  \u003crect serif:id=\"--secondary-color\" x=\"1.029\" y=\"14\" width=\"16\" height=\"2\" style=\"fill:#aaa;\"/\u003e\n  \u003crect serif:id=\"--main-color\" x=\"13.029\" y=\"1\" width=\"2\" height=\"4\" style=\"fill:#333;\"/\u003e\n  \u003crect serif:id=\"--main-color\" x=\"4.029\" y=\"7\" width=\"2\" height=\"4\" style=\"fill:#333;\"/\u003e\n  \u003crect serif:id=\"--main-color\" x=\"10.029\" y=\"13\" width=\"2\" height=\"4\" style=\"fill:#333;\"/\u003e\n\u003c/svg\u003e\n```\n\n**This will be transformed to:**\n\n```svg\n\n\u003csvg viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\" xml:space=\"preserve\"\n     style=\"fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2\"\n\u003e\n  \u003cpath style=\"fill:var(--secondary-color,#aaa)\" d=\"M1.029 2h16v2h-16zm0 6h16v2h-16zm0 6h16v2h-16z\"/\u003e\n  \u003cpath style=\"fill:var(--main-color,#333)\" d=\"M13.029 1h2v4h-2zm-9 6h2v4h-2zm6 6h2v4h-2z\"/\u003e\n\u003c/svg\u003e\n```\n\nThe icon is optimized by [svgo](https://github.com/svg/svgo) and the colors are substituted with a css-variable having the original color\nset as default. The settings of how to parse annotated svgs are configurable.\n\n## Definition model\n\nThe output of this tool is a definition model with a constant for each converted svg asset. The typings can be configured\nin the configuration rc file.\n\n** Example Typescript definition model file:**\n\n```typescript\n\n// Prefixed with the prefix `scaIcon` and typed `ScaIcon`\nexport const scaIcon_action_preset: ScaIcon = {\n  name: `action-preset`,\n  svg: `\u003csvg viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\" xml:space=\"preserve\" style=\"fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2\"\u003e\u003cpath style=\"fill:none;fill-rule:nonzero\" d=\"M0 0h18v18H0z\"/\u003e\u003cpath style=\"fill:var(--secondary-color,#aaa)\" d=\"M1.029 2h16v2h-16zm0 6h16v2h-16zm0 6h16v2h-16z\"/\u003e\u003cpath style=\"fill:var(--main-color,#333)\" d=\"M13.029 1h2v4h-2zm-9 6h2v4h-2zm6 6h2v4h-2z\"/\u003e\u003c/svg\u003e`,\n};\n\n// ... All other converted files\n\n// A type of all the asset names\nexport type scaIcon =\n  | 'action-preset' // ... And all other converted files\n  ;\n\n// ... Type definitions\nexport interface ScaIcon {\n  name: string;\n  svg: string;\n}\n```\n\n## Configuration\n\nIt is mandatory to add a rc file to the path you want to create a svg definition model for.\n\n### .svg-assets-to-typescriptrc.yml\n\nThe main config can be configured in a rc yml file. This file must be specified as command parameter when running the tool.\n\n```typescript\ninterface ConfigInterface {\n  inputs: string[]; // One ore more input paths locating the SVGs\n  parser: {\n    cssVariableAttribute: string; //Name of the aattribute in which the css variable name is annotated to\n    cssVariableRegex: string; // Regex to fetch the variable\n    svgoPlugins?: string[]; // List of svgo plugins to use\n    js2svg: Record\u003cstring, any\u003e // js2svg settings\n  };\n  writer: {\n    constPrefix: string; // Name of the constant prefix to use in the definition model\n    assetInterfaceName: string; // Name of the Typescript asset interface which will be generated\n  }\n}\n```\n\n## Running the tool\n# Using the tool\nCheckout this repository and run it 😃\n\n## Bash\n```shell\n./svg-assets-to-typescript.sh .svg-assets-to-typescriptrc.yml .\n ```\n\n# Developing the tool\n- Edit the .env-file according to the template and your paths\n- Spin up the container\n\n```bash\ndocker-compose -f docker-compose.development.yml up -d --build --force-recreate --remove-orphans\ndocker exec -ti svg-assets-to-typescript sh\n```\n\nAnd in the container's terminal:\n- Install dependencies\n- run the tool\n  - `--input`: The root input rc file\n  - `--output`: The root output definition model file\n\n```bash\nnpm install\nnpm run extract --input=/assets/.svg-assets-to-typescriptrc.yml --output=/output\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscientanl%2Fsvg-assets-to-typescript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscientanl%2Fsvg-assets-to-typescript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscientanl%2Fsvg-assets-to-typescript/lists"}