Inject SVG as a child of the provided element.
SVG Injector will take .icon-umbrella background image and inject it into the dom under #MyIcon.
Project is still in development. Not yet on NPM.
npm install lukejamesk/svg-injector
<span class="icon icon-umbrella" id="MyIcon"></span>
import { SVGInjector } from "svg-injector"
let svgInjector = new SVGInjector({
cssFilePath: "/path/to/file.css"
});
let element = document.getElementById('MyIcon');
// Alternatively for use on an element not yet in the dom.
// let element = document.createElement("span");
// element.classes = "icon icon-umbrella";
svgInjector.inject(element);
.icon-umbrella {
display: inline-block;
width: 50px;
height: 50px;
background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221%22%20viewBox%3D%220%200%2050%2050%22%20enable-background%3D%22new%200%200%2050%2050%22%20fill%3D%22%23000000%22%3E%3Cpath%20style%3D%22text-indent%3A0%3Btext-align%3Astart%3Bline-height%3Anormal%3Btext-transform%3Anone%3Bblock-progression%3Atb%3B-inkscape-font-specification%3ABitstream%20Vera%20Sans%22%20d%3D%22M%2024.875%20-0.03125%20A%201.0151015%201.0151015%200%200%200%2024%201%20L%2024%203.09375%20C%2020.176459%203.380157%2014.733344%205.2711611%209.875%208.25%20C%204.5985012%2011.485226%200%2016.0125%200%2021.40625%20C%200%2024.46625%202.5939815%2027%205.8125%2027%20C%207.3180556%2027%208.6869095%2026.351416%209.71875%2025.4375%20C%209.9767103%2025.209021%2010.22214%2024.949017%2010.4375%2024.6875%20C%2010.593877%2024.930765%2010.773823%2025.164353%2010.96875%2025.375%20C%2011.943385%2026.428235%2013.37381%2027%2015%2027%20C%2016.97451%2027%2018.53782%2026.14395%2019.53125%2025%20C%2019.655429%2024.857006%2019.766929%2024.712786%2019.875%2024.5625%20C%2020.201738%2024.951057%2020.607769%2025.280264%2021.03125%2025.59375%20C%2021.884025%2026.225025%2022.92025%2026.711436%2024%2026.90625%20L%2024%2042.8125%20A%201.0001%201.0001%200%200%200%2024.03125%2043.0625%20C%2020.809706%2043.388807%2018.40625%2045.1875%2018.40625%2045.1875%20A%201.0063276%201.0063276%200%201%200%2019.59375%2046.8125%20C%2019.59375%2046.8125%2022.10404%2045%2025%2045%20C%2027.89596%2045%2030.40625%2046.8125%2030.40625%2046.8125%20A%201.0063276%201.0063276%200%201%200%2031.59375%2045.1875%20C%2031.59375%2045.1875%2029.190294%2043.388807%2025.96875%2043.0625%20A%201.0001%201.0001%200%200%200%2026%2042.8125%20L%2026%2026.90625%20C%2027.083616%2026.705168%2028.120504%2026.201438%2028.96875%2025.5625%20C%2029.324639%2025.294428%2029.644477%2025.003143%2029.9375%2024.6875%20C%2030.093877%2024.930765%2030.273823%2025.164353%2030.46875%2025.375%20C%2031.443385%2026.428235%2032.87381%2027%2034.5%2027%20C%2036.47451%2027%2038.03782%2026.14395%2039.03125%2025%20C%2039.164981%2024.846007%2039.291192%2024.693632%2039.40625%2024.53125%20C%2039.671066%2024.887001%2039.971899%2025.208056%2040.3125%2025.5%20C%2041.356621%2026.394961%2042.709722%2027%2044.1875%2027%20C%2047.406019%2027%2050%2024.46625%2050%2021.40625%20C%2050%2016.022917%2045.460106%2011.487308%2040.21875%208.25%20C%2035.383768%205.2636881%2029.929791%203.3743391%2026%203.09375%20L%2026%201%20A%201.0151015%201.0151015%200%200%200%2024.875%20-0.03125%20z%20M%2024.625%205.9375%20A%201.0151015%201.0151015%200%200%200%2025.28125%205.96875%20C%2025.657015%206.529514%2026.099101%207.2472012%2026.59375%208.375%20C%2027.662025%2010.810667%2028.725365%2014.652875%2028.9375%2020.3125%20C%2028.063897%2020.633926%2026.434161%2021.1875%2024.90625%2021.1875%20C%2023.386969%2021.1875%2021.875892%2020.634512%2021.0625%2020.3125%20C%2021.265674%2014.217896%2022.341373%2010.352681%2023.40625%208.03125%20C%2023.846225%207.0721043%2024.259032%206.4351756%2024.625%205.9375%20z%20M%2019.09375%206.21875%20C%2018.40352%206.6794481%2017.840805%206.9224198%2017.125%207.5%20C%2013.741258%2010.23033%2010.28735%2014.391335%209.625%2020.0625%20A%201.0001%201.0001%200%200%200%209.59375%2020.09375%20C%209.59375%2020.09375%206.8851974%2021.1875%205.40625%2021.1875%20C%204.2691826%2021.1875%202.7409983%2020.571617%202.09375%2020.28125%20C%202.7171551%2016.462824%206.3883833%2012.726739%2010.9375%209.9375%20C%2013.598326%208.3060447%2016.459728%207.0759268%2019.09375%206.21875%20z%20M%2027.65625%206.21875%20C%2028.852692%206.7856787%2030.198978%207.4257337%2031.65625%208.53125%20C%2034.855106%2010.957968%2037.981378%2014.724155%2038.4375%2020.53125%20C%2037.554769%2020.837685%2036.281908%2021.1875%2034.90625%2021.1875%20C%2033.183958%2021.1875%2031.667904%2020.653021%2030.9375%2020.34375%20C%2030.721153%2014.413453%2029.586821%2010.254202%2028.40625%207.5625%20C%2028.138522%206.9520792%2027.921274%206.6935911%2027.65625%206.21875%20z%20M%2032.34375%206.6875%20C%2034.605881%207.5202643%2036.999161%208.585879%2039.1875%209.9375%20C%2043.712263%2012.732206%2047.310043%2016.476828%2047.90625%2020.3125%20C%2047.387882%2020.593149%2046.103752%2021.1875%2044.6875%2021.1875%20C%2042.851136%2021.1875%2040.4375%2020.09375%2040.4375%2020.09375%20A%201.0001%201.0001%200%200%200%2040.40625%2020.09375%20C%2039.805029%2013.813112%2036.292712%209.585204%2032.84375%206.96875%20C%2032.664228%206.8325608%2032.522924%206.815553%2032.34375%206.6875%20z%20M%2021.8125%206.8125%20C%2021.73217%206.9739887%2021.67399%207.0125763%2021.59375%207.1875%20C%2020.394782%209.8012494%2019.266192%2013.986726%2019.0625%2020.34375%20C%2018.435928%2020.642299%2017.070955%2021.1875%2015.09375%2021.1875%20C%2013.585704%2021.1875%2012.40452%2020.852467%2011.59375%2020.5625%20C%2012.08872%2015.398614%2015.177441%2011.642599%2018.375%209.0625%20C%2019.629571%208.0501909%2020.721169%207.4431686%2021.8125%206.8125%20z%20M%209.46875%2022.28125%20C%209.3552263%2022.761072%208.969661%2023.4108%208.375%2023.9375%20C%207.6568405%2024.573584%206.7069444%2025%205.8125%2025%20C%204.0595238%2025%202.6688915%2023.926163%202.1875%2022.5%20C%203.0536209%2022.838011%204.2095984%2023.1875%205.40625%2023.1875%20C%207.0351239%2023.1875%208.6125461%2022.634179%209.46875%2022.28125%20z%20M%2040.53125%2022.3125%20C%2041.379679%2022.659944%2042.917591%2023.1875%2044.6875%2023.1875%20C%2045.895637%2023.1875%2046.97406%2022.878081%2047.78125%2022.5625%20C%2047.279422%2023.955336%2045.913207%2025%2044.1875%2025%20C%2043.265278%2025%2042.299629%2024.605039%2041.59375%2024%20C%2040.997825%2023.489207%2040.631833%2022.868759%2040.53125%2022.3125%20z%20M%2028.9375%2022.46875%20C%2028.832747%2022.790928%2028.44994%2023.410272%2027.75%2023.9375%20C%2026.964436%2024.529224%2025.924909%2024.937449%2025.09375%2024.96875%20A%201.0001%201.0001%200%200%200%2024.90625%2024.96875%20A%201.0001%201.0001%200%200%200%2024.84375%2025%20C%2024.006995%2024.954851%2022.98267%2024.53425%2022.21875%2023.96875%20C%2021.529863%2023.458794%2021.134879%2022.867826%2021.03125%2022.5%20C%2021.944919%2022.823308%2023.290995%2023.1875%2024.90625%2023.1875%20C%2026.560281%2023.1875%2027.979584%2022.802083%2028.9375%2022.46875%20z%20M%2031.1875%2022.53125%20C%2032.074056%2022.846912%2033.312462%2023.1875%2034.90625%2023.1875%20C%2036.144319%2023.1875%2037.232098%2023.007979%2038.09375%2022.78125%20C%2037.948978%2023.100238%2037.772547%2023.409644%2037.53125%2023.6875%20C%2036.87468%2024.44355%2035.92549%2025%2034.5%2025%20C%2033.32619%2025%2032.512865%2024.621765%2031.9375%2024%20C%2031.592803%2023.627505%2031.347118%2023.130287%2031.1875%2022.53125%20z%20M%2018.65625%2022.625%20C%2018.498995%2022.999008%2018.311424%2023.364875%2018.03125%2023.6875%20C%2017.37468%2024.44355%2016.42549%2025%2015%2025%20C%2013.82619%2025%2013.012865%2024.621765%2012.4375%2024%20C%2012.137817%2023.676149%2011.936787%2023.24882%2011.78125%2022.75%20C%2012.633549%2022.984704%2013.749799%2023.1875%2015.09375%2023.1875%20C%2016.662331%2023.1875%2017.805934%2022.907861%2018.65625%2022.625%20z%20M%2010%2041%20C%209.4477153%2041%209%2041.447715%209%2042%20C%209%2042.552285%209.4477153%2043%2010%2043%20C%2010.552285%2043%2011%2042.552285%2011%2042%20C%2011%2041.447715%2010.552285%2041%2010%2041%20z%20M%2016%2041%20C%2015.447715%2041%2015%2041.447715%2015%2042%20C%2015%2042.552285%2015.447715%2043%2016%2043%20C%2016.552285%2043%2017%2042.552285%2017%2042%20C%2017%2041.447715%2016.552285%2041%2016%2041%20z%20M%2034%2041%20C%2033.447715%2041%2033%2041.447715%2033%2042%20C%2033%2042.552285%2033.447715%2043%2034%2043%20C%2034.552285%2043%2035%2042.552285%2035%2042%20C%2035%2041.447715%2034.552285%2041%2034%2041%20z%20M%2040%2041%20C%2039.447715%2041%2039%2041.447715%2039%2042%20C%2039%2042.552285%2039.447715%2043%2040%2043%20C%2040.552285%2043%2041%2042.552285%2041%2042%20C%2041%2041.447715%2040.552285%2041%2040%2041%20z%20M%207%2044%20C%206.4477153%2044%206%2044.447715%206%2045%20C%206%2045.552285%206.4477153%2046%207%2046%20C%207.5522847%2046%208%2045.552285%208%2045%20C%208%2044.447715%207.5522847%2044%207%2044%20z%20M%2013%2044%20C%2012.447715%2044%2012%2044.447715%2012%2045%20C%2012%2045.552285%2012.447715%2046%2013%2046%20C%2013.552285%2046%2014%2045.552285%2014%2045%20C%2014%2044.447715%2013.552285%2044%2013%2044%20z%20M%2037%2044%20C%2036.447715%2044%2036%2044.447715%2036%2045%20C%2036%2045.552285%2036.447715%2046%2037%2046%20C%2037.552285%2046%2038%2045.552285%2038%2045%20C%2038%2044.447715%2037.552285%2044%2037%2044%20z%20M%2043%2044%20C%2042.447715%2044%2042%2044.447715%2042%2045%20C%2042%2045.552285%2042.447715%2046%2043%2046%20C%2043.552285%2046%2044%2045.552285%2044%2045%20C%2044%2044.447715%2043.552285%2044%2043%2044%20z%20M%2010%2047%20C%209.4477153%2047%209%2047.447715%209%2048%20C%209%2048.552285%209.4477153%2049%2010%2049%20C%2010.552285%2049%2011%2048.552285%2011%2048%20C%2011%2047.447715%2010.552285%2047%2010%2047%20z%20M%2016%2047%20C%2015.447715%2047%2015%2047.447715%2015%2048%20C%2015%2048.552285%2015.447715%2049%2016%2049%20C%2016.552285%2049%2017%2048.552285%2017%2048%20C%2017%2047.447715%2016.552285%2047%2016%2047%20z%20M%2022%2047%20C%2021.447715%2047%2021%2047.447715%2021%2048%20C%2021%2048.552285%2021.447715%2049%2022%2049%20C%2022.552285%2049%2023%2048.552285%2023%2048%20C%2023%2047.447715%2022.552285%2047%2022%2047%20z%20M%2028%2047%20C%2027.447715%2047%2027%2047.447715%2027%2048%20C%2027%2048.552285%2027.447715%2049%2028%2049%20C%2028.552285%2049%2029%2048.552285%2029%2048%20C%2029%2047.447715%2028.552285%2047%2028%2047%20z%20M%2034%2047%20C%2033.447715%2047%2033%2047.447715%2033%2048%20C%2033%2048.552285%2033.447715%2049%2034%2049%20C%2034.552285%2049%2035%2048.552285%2035%2048%20C%2035%2047.447715%2034.552285%2047%2034%2047%20z%20M%2040%2047%20C%2039.447715%2047%2039%2047.447715%2039%2048%20C%2039%2048.552285%2039.447715%2049%2040%2049%20C%2040.552285%2049%2041%2048.552285%2041%2048%20C%2041%2047.447715%2040.552285%2047%2040%2047%20z%22%20fill%3D%22%23000000%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
background-size: 50px 50px;
}