Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/arman2409/svg-colorizer
NPM package for SVG colorization
https://github.com/arman2409/svg-colorizer
colorize npm-package svg
Last synced: 25 days ago
JSON representation
NPM package for SVG colorization
- Host: GitHub
- URL: https://github.com/arman2409/svg-colorizer
- Owner: Arman2409
- License: mit
- Created: 2024-04-29T11:53:49.000Z (6 months ago)
- Default Branch: develop
- Last Pushed: 2024-06-06T20:00:14.000Z (5 months ago)
- Last Synced: 2024-09-30T10:23:34.241Z (about 1 month ago)
- Topics: colorize, npm-package, svg
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/svg-colorizer
- Size: 75.2 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# `SVG colorizer`
Fill entire SVGs with a single color or replace specific colors within them.
## Getting started
1. Install the package with command
```bash
npm install svg-colorizer
```
2. Import functions in JavaScript/TypeScript file and use them
```javascript
import { fill } from "svg-colorizer";
fill(document.querySelector("svg"), "red");
```
## Examples of usage
```javascript
import { fill } from "svg-colorizer";
fill(document.querySelector("svg"), "red");
```
```javascript
import { fill } from "svg-colorizer";
const svgWithNewColor = fill(svgString, "red");
```
```javascript
import { getRandomColor } from "svg-colorizer"
const newColor = getRandomColor();
```
## Available functions
` This functions will use either DOM API or string manipulation for achieving their goal, depending whether they are used in client side or server side.`
- [fill](#fill)
- [getColors](#getColors)
- [replace](#replace)
- [changeBrightness](#changeBrightness)
- [changeAlpha](#changeAlpha)
- [getRandomColor](#getRandomColor)
#### fill(svg, color, [ignoreColors], [callback])
This function fills the specified SVG element with a given color.
**Arguments:**
* `svg`: SVG Element which should be HTML element in DOM available environment and string otherwise.
* `color`: A string representing the desired fill color.
* `ignoreColors` (optional): An array of color strings to exclude from replacement.
* `callback` (optional): A function that executes after the fill operation is complete.
#### replace(svg, detailsArray, [callback])
This function replaces specific colors within the SVG element based on a configuration.
**Arguments:**
* `svg`: SVG Element which should be HTML element in DOM available environment and string otherwise.
* `detailsArray`: An array of objects with the following properties:
* `target`: A string representing the color you want to replace within the SVG.
* `replace`: A string representing the new color to use as a replacement.
* `callback` (optional): A function that executes after the replace operation is complete.
#### getColors(svg, [onlyParent])
This function extracts the colors used in the SVG element and returns them as an object.
**Arguments:**
* `svg`: SVG Element which should be HTML element in DOM available environment and string otherwise.
* `onlyParent` (optional): A boolean flag indicating whether to extract colors only from the parent element (true) or include its children (false, default).
**Returns:**
An object with keys:
* `fill`: An array containing all fill color strings used in the SVG.
* `stroke`: An array containing all stroke color strings used in the SVG (if applicable).
* `stop`: An array containing all stop color strings used in the SVG for gradients (if applicable).
#### changeBrightness(svg, factor)
This function changes the brightness of SVG element by replacing all colors in it.
**Arguments:**
* `svg`: SVG Element which should be HTML element in DOM available environment and string otherwise.
* `factor`: the amount of brightness change from -255 to 255, the bigger the factor, the brighter the image.
#### changeAlpha(svg, amount)
This function changes the alpha of SVG element by replacing all colors in it.
**Arguments:**
* `svg`: SVG Element which should be HTML element in DOM available environment and string otherwise.
* `factor`: the amount of brightness change from -1 to 1, the bigger the factor, the higher the alpha.
#### getRandomColor([format])
This function generates a random color and returns it in either hexadecimal notation or RGB format.
**Arguments:**
* `format` (optional): A string specifying the desired format, either "hex" (default) or "rgb".
**Returns:**
A string representing the randomly generated color in the specified format (hexadecimal or RGB).