This library is no longer being maintained and the git repo has been archived.
Gulp plugin that takes SVG files and fills their shapes with a single colour using svg-fill. It can also be configured with multiple colours, in which case it will output as many SVG files as there are colours, per single input SVG file.
- Node.js >= 14
npm install --save-dev gulp-svg-fill
In your gulpfile.js (using Gulp v4):
const gulp = require('gulp');
const svgFill = require('gulp-svg-fill');
function colorSvgs() {
return gulp.src('src/**/*.svg')
.pipe(svgFill({
colors: {
'Red': '#FF0000',
'Green': '#00FF00',
'Blue': '#0000FF'
}
}))
.pipe(gulp.dest('dist/'));
}
module.exports = {
default: colorSvgs
};The above example will create 3 new SVG files - one filled in red, one in greeen and the other in blue - for each source SVG file found in the source directory.
For example, if the src/ folder contained logo.svg, then after running Gulp, the dist/ folder would contain:
logo_red.svglogo_green.svglogo_blue.svg
gulp-svg-fill expects an options object to be passed in. It supports the following properties:
colors(mandatory): An object mapping color names to color values.- Must contain at least one color.
- Values may be RGB hex strings or instances of
Color(seecolorNPM package)
renameFn(optional): A function to generate per-color filenames.- Should have a signature of:
(fileStem: string, colorName: string) => stringfileStemis the name part of the input SVG filepath - i.e. without the file extension. For example, if the full file path ispath/to/fancy-logo.svg, then the file stem passed into the rename function will befancy-logo.colorNameis the property name of a colour defined incolors. For instance, if your colors object looks like{ 'Rebecca Purple': '#663399' }, thencolorNamewould beRebecca Purple.
- If omittied, a default rename function is used which takes the original file stem and appends an underscore followed by the kebab-case version of the color name. E.g. if the input file is
fancy-logo.svg, the output for the colorRebecca Purplewould befancy-logo_rebecca-purple.svg.
- Should have a signature of:
Clone this repo and npm install its dependencies:
git clone [email protected]:c1rrus/gulp-svg-fill.git
cd svg-fill/
npm install
npm run build
This will transpile the TypeScript source code (in the src/) directory and output the results to dist/.
For development convenience, you can alternatively watch the source files and automatically trigger rebuilds when they change:
npm run watch
npm run test
We use Jest for the tests. Each module's unit tests is located alongside its [module name].ts file as [module name].test.ts.
To help keep code consistent and avoid common gotchas, we lint our code using typescript-eslint. To run it do:
npm run lint
All commit messages must follow the Conventional Commits standard as we use automated release tools that rely on this. Commit messages are linted to check this and your CI builds will fail if your messages don't conform.
To make composing suitable commit messages easier, this repo is Commitizen friendly. We strongly recommend using commitizen rather than using git directly. To use it, simply run:
npm run commit
...and follow the prompts in your terminal.
![dependabot-preview[bot] avatar](https://avatars.githubusercontent.com/in/2141?v=4 "dependabot-preview[bot]")
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent