Package Exports
- svg-style-js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (svg-style-js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
svg-style-js
Description: Change the style attribute(e.g., fill:color) on SVG files that are sourced inside HTML 'img' tags.
Instructions:
Add
<script src="svg-style.js"></script>.
Invoke
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:
<style>
.rainbow{
display: flex;
justify-content: space-around;
}
</style>
<body>
<div class="rainbow">
<img class="red" src="macos.svg"><img>
<img class="orange" src="macos.svg"><img>
<img class="yellow" src="macos.svg"><img>
<img class="green" src="macos.svg"><img>
<img class="blue" src="macos.svg"><img>
<img class="indigo" src="macos.svg"><img>
<img class="violet" src="macos.svg"><img>
</div>
// Loading svg-style.js
<script src="svg-style.js"></script>
// Call function svgStyle to change the style/fill attribute of an SVG file.
<script>
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%)")
</script>
</body>
After: