SVG Icons + Framework7

Question

Framework7 uses SVG icons in their example layouts like here.

Here's their code for the first icon:

i.tabbar-demo-icon-1 {
  width: 30px;
  height: 30px;
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='%23929292'><g><circle cx='15.2' cy='8.8' r='1.5'/><polygon points='16.7,12.3 16.7,11.7 16.7,11.3 13.7,11.3 13.7,12.3 14.7,12.3 14.7,20.3 13.7,20.3 13.7,21.3 17.7,21.3 17.7,20.3 16.7,20.3'/><path d='M15.2,2.3C8.3,2.3,2.7,7.9,2.7,14.8s5.6,12.5,12.5,12.5c6.9,0,12.5-5.6,12.5-12.5S22.1,2.3,15.2,2.3z M15.2,26.3 c-6.3,0-11.5-5.2-11.5-11.5S8.8,3.3,15.2,3.3s11.5,5.2,11.5,11.5S21.5,26.3,15.2,26.3z'/></g></svg>");
}
.active i.tabbar-demo-icon-1 {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 30 30' fill='%23007aff'><path d='M15,2.6C8.1,2.6,2.5,8.2,2.5,15.1C2.5,22,8.1,27.6,15,27.6S27.5,22,27.5,15.1C27.5,8.2,21.9,2.6,15,2.6z M15,7.6 c0.8,0,1.5,0.7,1.5,1.5c0,0.8-0.7,1.5-1.5,1.5c-0.8,0-1.5-0.7-1.5-1.5C13.5,8.3,14.2,7.6,15,7.6z M17.5,21.6h-4v-1h1v-8h-1v-1h3V12 v0.6v8h1V21.6z'/></svg>");
}

Where did they get this background image URLs for the icons? How can I find links for others icons so I can replace the existing one?

Answer 1

After what I understand, what you are looking for is some sort of documentation for Framework7 icons. At the moment, Framework7 does not have any included icon pack, only some basic icons to use in the examples.

I have looked around myself, and it seems like you have to use a third-party icon set, like Font Awesome. If you are looking for iOS-like icons, you could try also try something like iOS7 Set Lined 1 from Flaticons.

EDIT: Framework7 now has its own iOS icon font over at GitHub. Documentation is over here. Highly recommended to to check out (and it's free/MIT-licensed!).

Answer 2

Take the SVG you want to convert to a Data URI. Then:

1. Remove all newlines (and unecessary spaces if you choose)
2. Replace any double quotes with single quotes
3. Replace any hash ('#') characters with %23
4. Prepend the string data:image/svg+xml;charset=utf-8,

This should be all you need to do for most SVGs you want to convert. You may run into trouble if your SVG is very large (character-wise).

Answer 3

A step by step answer can help you.

1. Code carefully your SVG, using a tool as Inkscape or Illustrator could be of help. Minimize the code to essential for performance on low-end or older devices;
2. Code your CSS properly to work in the framework (I.E.: add all due selectors and cross-check CSS and HTML);
3. Use " for the argument of background-image:url() and ' for the arguments of SVG attributes;
4. Use the correct Data URI (this may be of help).

I add a working example for Framework7, a orange Youtube icon.

    i.icon.icon-youtube {
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 2.3C.2 2.3 0 3.3 0 10s.2 7.7 10 7.7 10-1 10-7.7-.2-7.7-10-7.7zm3.2 8l-4.5 2c-.4.3-.7 0-.7-.3V8c0-.4.3-.6.7-.4l4.5 2c.4.3.4.6 0 .7z' fill='#ff9800'/></svg>");
    }