{"id":20027105,"url":"https://github.com/unic/gulp-colorize-svgs","last_synced_at":"2025-05-05T02:31:30.073Z","repository":{"id":30237682,"uuid":"33788851","full_name":"unic/gulp-colorize-svgs","owner":"unic","description":"Gulp plugin to create color variants of SVGs and add them to the stream","archived":false,"fork":false,"pushed_at":"2017-04-26T13:29:06.000Z","size":9,"stargazers_count":3,"open_issues_count":0,"forks_count":2,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-04-08T15:49:45.103Z","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/unic.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":"2015-04-11T19:18:17.000Z","updated_at":"2018-04-04T09:30:41.000Z","dependencies_parsed_at":"2022-08-03T13:00:27.686Z","dependency_job_id":null,"html_url":"https://github.com/unic/gulp-colorize-svgs","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unic%2Fgulp-colorize-svgs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unic%2Fgulp-colorize-svgs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unic%2Fgulp-colorize-svgs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unic%2Fgulp-colorize-svgs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/unic","download_url":"https://codeload.github.com/unic/gulp-colorize-svgs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252427877,"owners_count":21746292,"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-13T09:09:03.559Z","updated_at":"2025-05-05T02:31:29.020Z","avatar_url":"https://github.com/unic.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gulp-colorize-svgs\n\nReplaces the ```fill``` attribute value of an SVG with one or several predefined colors and adds the new files to the stream. The original file is removed from the stream.\n\nIf no colors were specified, the original files are passed through.\n\n**Word of caution**: If an SVG does not have a ```fill``` attribute (which seems to be the case for black icons exported from Illustrator), the default ```option.replaceColor``` function won't find anything to replace and should be adapted accordingly (e.g. ```return content.replace(/\u003cpath/g, '\u003cpath fill=\"#' + hex + '\"');```).\n\nFor complex SVGs you should probably add [cheerio](http://npmjs.com/package/cheerio) to the mix.\n\n\n## Usage\n\nFirst, install `gulp-colorize-svgs` as a development dependency:\n\n```shell\nnpm install --save-dev gulp-colorize-svgs\n```\n\nThen, add it to your `gulpfile.js`:\n\n```javascript\nvar colorize = require('gulp-colorize-svgs');\n\ngulp.task('colorize', function(){\n  return gulp.src(['app/icons/*.svg'])\n    .pipe(colorize({\n      colors: {\n        // All files\n        default: {\n          blue: '0000ff',\n          red: 'ff0000'\n        },\n        // Specific files\n        icon2: {\n          green: '00ff00'\n        }\n      },\n      replaceColor: function(content, hex) {\n        return content.replace(/fill=\"#(.*?)\"/g, 'fill=\"#' + hex + '\"');\n      },\n      replacePath: function(path, colorKey) {\n        return path.replace(/\\.svg/, '--' + colorKey + '.svg');\n      }\n    }))\n    .pipe(gulp.dest('dist/icons/'));\n});\n```\n\n\n## Options\n\n### options.colors\nType: `Object`\n\nColors to use. Key corresponds to file name, \"default\" property is used as a fallback for unspecified files.\n\n### options.replaceColor\nType: `Function`\n\nSVG transformation function. Replacing every occurrence of a ```fill``` attribute by default.\n\n### options.replacePath\nType: `Function`\n\nTransformation function for the new file's name. Adding ```--[colorKey]``` by default.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funic%2Fgulp-colorize-svgs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funic%2Fgulp-colorize-svgs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funic%2Fgulp-colorize-svgs/lists"}