A CodePen by Leonard Meagher.

index.html

<div class="wrap">  
  
  WIP SVG smileys
  <div class="smiles">
    :O :P :| :icecream: :frog: :) :D
  </div>
</div>

script.js

/*
  The way naming the classes goes
  is the find function searches through an object
  in the Smile Object called map
  and uses the name of each array as the ID to send back
  then using Smile.prefix adds the default "icon-" prefix
  only change the prefix if you're want to use your own stylesheet (or don't depending on how you want to do it)
*/
Smile.find($("body")[0],function(ID,string){
  //this function expects you to return an element, to replace what it found.
	return $("<span>")
  .addClass(ID)
  .attr("title",string)[0];//a non jquery element
});
//console log the Smile object
// Also check the settings for this panel, to see the script I'm working on.

style.scss

@import "compass";
/*
  A similar setup to icomoon would be cool
  like if I made something to generate the css
  based on the icons selected, and mapId
  and had it pack it all into its own little svg... 
  BUT I don't know how to do that yet.
  I think that's a plan though.

  --Check external stylesheet
*/
html,body{width:100%;height:100%;padding:0;margin:0;}
body{
  color:white;
	font-family:helvetica,serif;
	font-size:2em;
	background:#69AAFF;
  text-align:center;
  vertical-align:middle;
  &:before{
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle;
  }
}
.wrap{
  display:inline-block;
  vertical-align:middle;
  max-width:50%;
}
.smiles{
  text-align:left;
  font-size:2em;
}
[class*="icon-"]:hover{transform:scale(1.5);}