https://github.com/kyle-wannacott/svg-style
Change the style attribute of SVG files that are sourced from inside <img> tags.
https://github.com/kyle-wannacott/svg-style
fill-color img javascript js path style svg svg-images
Last synced: 3 months ago
JSON representation
Change the style attribute of SVG files that are sourced from inside <img> tags.
- Host: GitHub
- URL: https://github.com/kyle-wannacott/svg-style
- Owner: kyle-wannacott
- License: mit
- Created: 2021-02-01T10:12:39.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-04-20T05:17:35.000Z (over 4 years ago)
- Last Synced: 2025-07-09T04:02:12.079Z (3 months ago)
- Topics: fill-color, img, javascript, js, path, style, svg, svg-images
- Language: JavaScript
- Homepage:
- Size: 62.5 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# svg-style
Description: Change the style attribute(e.g., fill:color) on SVG files that are sourced inside HTML 'img' tags.
npm: https://www.npmjs.com/package/svg-style
# Instructions:
1. Add `.`
2. Invoke function: `svgStyle(imageClass,svgFile, style)`
* `imageClass:` The class you have put on the img tags.
* `svgFile:` The svg file that src="" is loading on the img tag.
* `style:` What you want the style="" to contain e.g. "fill:yellow; filter:invert(80%)"
# Example:
Before:
```html
.rainbow{
display: flex;
justify-content: space-around;
}
![]()
![]()
![]()
![]()
![]()
![]()
![]()
// Loading svg-style.js
// Call function svgStyle to change the style/fill attribute of an SVG file.
svgStyle("red","macos.svg","fill:red;")
svgStyle("orange","macos.svg","fill:#FF7F00;")
svgStyle("yellow","macos.svg", "fill:yellow;")
svgStyle("green","macos.svg","fill:rgb(0, 255, 0);")
svgStyle("blue","macos.svg","fill:#FF7F00;")
svgStyle("indigo","macos.svg","fill:indigo")
svgStyle("violet","macos.svg", "fill:yellow; filter:invert(80%)")
```
After:
