Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
PostCSS SVG Icons
path = require 'path'
fs = require 'fs'
fixedEncodeURIComponent = (str) ->
encodeURIComponent(str).replace(/[!'()*]/g, (c) ->
'%' + c.charCodeAt(0).toString(16)
)
injectColor = (svg, color) ->
svg.replace(/<svg[^>]*>/, "$&<style>*{fill:#{ color }}</style>")
svgPath = (decl, name) ->
imgdir = path.join(__dirname, '../..', 'images', 'icons')
name += '.svg'
path.join(imgdir, name)
inlineSvg = (decl, name, color, size = 'contain') ->
svg = fs.readFileSync(svgPath(decl, name)).toString('utf-8')
svg = injectColor(svg, color)
svg = fixedEncodeURIComponent(svg.replace(/'/gmi, '\\i'))
svg = "url(data:image/svg+xml;charset=US-ASCII,#{ svg })"
decl.cloneBefore({prop: 'background-image', value: svg})
decl.cloneBefore({prop: 'background-repeat', value: 'no-repeat'})
module.exports = (css) ->
css.walkDecls 'svg-icon', (decl) ->
declArr = decl.value.split(/\s+/)
name = declArr[0]
color = declArr[1]
size = declArr[2]
inlineSvg(decl, name, color, size)
decl.remove()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.