CODEWITHSUNDEEP
csssvgsassurigulp-sass
alex bennett
alex bennett

Reputation: 872

Inline SVG via URI

I am trying to use data URI's for my SVG images, within css. The basic approach is to set the full data URI to = the value of the background property for the css class.

.bg {
  background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');
}

My question is: how can I break the data URI value into a separate file, and reference that file within my css class. Goal: separate all data URI's from base styles so that they do not make the css ridiculously long.

Have never used URI's to implement SVG's so am also open to any ideas anyone may have re: implementation of SVG's through URI. Thanks a bunch! :)

P.S. If there is a good way to automate this, I am using gulp and bootstrap sass for this project.

Upvotes: 0

Views: 350

Answers (1)

tuck
tuck

Reputation: 623

I prefer to use grunt-grunticon which produces css classes for you with fallback to png if needed. Then you can use scss or sass to @extend the icon in a way that you would like to use it. For instance @extend .icon-undo;

Hope this helps. Good luck.

Upvotes: 1

Related Questions