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: Screenshot

<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: Screenshot