search

Pavliko / postcss-svg

PostCSS plug-in which to insert inline SVG to CSS and allows you to manage it colors.
http://pavliko.github.io/postcss-svg/
Creative Commons Zero v1.0 Universal
124 stars 23 forks source link

SVG fragment formatting #44

Closed ericjasonthomas closed 5 years ago

ericjasonthomas commented 5 years ago

Trying to use postcss-svg with webpack and not getting utf8 encoding on background Expected: background-image: url ( url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 12 12' width='16' height='16' fill='%23c20430' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4.6H7.4V0H4.6v4.6H0v2.8h4.6V12h2.8V7.4H12V4.6z'/%3E%3C/svg%3E" ) output: background-image: url ( url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E %3Ctitle%3Elincoln svg sprite%3C/title%3E %3Csymbol id='lshape' viewBox='0 0 34 47.9'%3E %3Cpolygon points='0 0 0 47.9 34 47.9 34 37.9 9.9 37.9 9.9 0 0 0'/%3E %3C/symbol%3E %3Csymbol id='phone' viewBox='0 0 50 50'%3E %3Cpath d='M50,39.5a2.4,2.4,0,0,1-.7,2.1l-7,7a4,4,0,0,1-1.2.9l-1.5.5h-1l-3.3-.3A24.7,24.7,0,0,1,29.7,48a46.2,46.2,0,0,1-7.4-4.1,55.1,55.1,0,0,1-8.8-7.4,58,58,0,0,1-6.1-7,49.8,49.8,0,0,1-3.9-6.2,33.2,33.2,0,0,1-2.2-5.1,27.3,27.3,0,0,1-1-4A13.1,13.1,0,0,1,0,11.6V10.5A5.2,5.2,0,0,1,.5,9a4,4,0,0,1,.9-1.2l7-7A2.3,2.3,0,0,1,10.2,0a2,2,0,0,1,1.2.4,3.7,3.7,0,0,1,.9,1L18,12.1a2.6,2.6,0,0,1,.3,1.9,3.3,3.3,0,0,1-.9,1.7l-2.6,2.6-.2.3a1.3,1.3,0,0,0-.1.4,9.6,9.6,0,0,0,1,2.5,23.3,23.3,0,0,0,2,3.1,34.4,34.4,0,0,0,3.8,4.2,35.1,35.1,0,0,0,4.2,3.8,24.5,24.5,0,0,0,3.1,2l1.9.8h1l.3-.2,3-3.1a3.2,3.2,0,0,1,2.2-.8,2.8,2.8,0,0,1,1.4.3h.1l10.2,6A2.7,2.7,0,0,1,50,39.5Z'/%3E %3C/symbol%3E %3Csymbol id='arrow' viewBox='0 0 15 25.5'%3E %3Cpolygon points='4 25.5 0 22 8.1 12.7 0 3.4 4 0 15 12.7 4 25.5'/%3E %3C/symbol%3E %3Csymbol id='plus' viewBox='0 0 12 12'%3E %3Cpolygon points='12 4.6 7.4 4.6 7.4 0 4.6 0 4.6 4.6 0 4.6 0 7.4 4.6 7.4 4.6 12 7.4 12 7.4 7.4 12 7.4 12 4.6'/%3E %3C/symbol%3E %3Csymbol id='minus' viewBox='0 0 12 3'%3E %3Crect width='12' height='3'/%3E %3C/symbol%3E %3Csymbol id='circlechk' viewBox='0 0 20 20'%3E %3Cpath d='M10,0A10,10,0,1,0,20,10,10,10,0,0,0,10,0ZM8.3,14.3,4.5,10.6,6,9.2l2.3,2.3L14,5.7l1.4,1.4Z'/%3E %3C/symbol%3E %3Csymbol id='chk' viewBox='0 0 20.7 17'%3E %3Cpolygon points='6.7 17 0 10.3 3 7.4 6.7 11.1 17.7 0 20.7 3 6.7 17'/%3E %3C/symbol%3E %3Csymbol id='campuses' viewBox='0 0 53.5 48.6'%3E %3Cpath class='74ba638d-ea14-4962-9379-2a1a028fa962' d='M49.1,48.7H4.4a2.9,2.9,0,0,1-2.9-2.9v-.7a2.9,2.9,0,0,1,2.9-2.9h.2V21.3H3.4A3.4,3.4,0,0,1,0,17.9v-.7a3.4,3.4,0,0,1,1.7-2.9L25,.5a3.4,3.4,0,0,1,3.4,0L51.9,14.3a3.4,3.4,0,0,1,1.7,2.9v.7a3.4,3.4,0,0,1-3.4,3.4H49V42.2h.2A2.9,2.9,0,0,1,52,45.1v.7A2.9,2.9,0,0,1,49.1,48.7ZM4.4,44.1a1,1,0,0,0-1,1v.7a1,1,0,0,0,1,1H49.1a1,1,0,0,0,1-1v-.7a1,1,0,0,0-1-1H47.1V19.4h3.1a1.5,1.5,0,0,0,1.5-1.5v-.7a1.5,1.5,0,0,0-.7-1.3L27.5,2.2a1.5,1.5,0,0,0-1.5,0L2.6,15.9a1.5,1.5,0,0,0-.7,1.3v.7a1.5,1.5,0,0,0,1.5,1.5H6.5V44.1Zm38.5-4.6h-8V19.4h8Zm-6.1-1.9H41V21.3H36.8Zm-6.1,1.9h-8V19.4h8Zm-6.1-1.9h4.2V21.3H24.7Zm-6.1,1.9h-8V19.4h8Zm-6.1-1.9h4.2V21.3H12.5ZM26.8,16a4.8,4.8,0,1,1,.5,0Zm0-7.6h-.3a2.9,2.9,0,0,0,.6,5.7h0a2.9,2.9,0,0,0,1.7-4.9A2.9,2.9,0,0,0,26.8,8.4Z'/%3E %3C/symbol%3E %3Csymbol id='books' viewBox='0 0 50.5 40.2'%3E %3Cpath class='c83c4102-8f01-424e-9b14-416e7ebd4124' d='M51.4,4,3.1,4.4a1.1,1.1,0,0,0,0,2.2H4.3v9.9a2.5,2.5,0,1,0,2.2,0V6.5h6v8.4a2.2,2.2,0,0,0,2.2,2.2H40.1a2.2,2.2,0,0,0,2.2-2.2V6.2h9.1a1.1,1.1,0,0,0,1.1-1.1A1.1,1.1,0,0,0,51.4,4ZM40.1,14.9H14.7V6.5l25.4-.2Z' transform='translate(-2 -4)'/%3E %3C/symbol%3E %3C/svg%3E#plus ) Not sure what I'm doing wrong. I have a repo https://github.com/ericjasonthomas/accordionSVG

I would appreciate any help

ericjasonthomas commented 5 years ago

Updated the webpack config and now getting the correct output but, no fill? https://github.com/ericjasonthomas/accordionSVG/blob/start/webpack.config.js