SVG Icon Sprites

The SVG icons are stored in an .svg sprite file. They are text elements with Unicode values for symbols. This extracts the desired icon from the sprite file and adds 10 <use> elements for each selection. The elements are rotating at rate based on the slider selection.

Rotate:

React Root SVG Source:

Babel Script (code):
  1. const svgRoot=ReactDOM.render(<svg className="svg-root" id="mySVG" width="800" height="500" overflow="visible" xmlns="http://www.w3.org/2000/svg" ><defs id="myDefs"><filter id="dropShadow" height="100">
  2.   <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
  3.   <feOffset dx="2" dy="2" result="offsetblur"/>
  4.   <feMerge>
  5.     <feMergeNode/>
  6.     <feMergeNode in="SourceGraphic"/>
  7.   </feMerge>
  8. </filter>
  9. </defs><g id="myIcons" /></svg>, svgDiv);
  10.  
  11.  class Icon extends React.Component {
  12.         render()
  13.         {
  14.             return (
  15.                 <use className="icon-svg"  id={this.props.id}  href={this.props.href}   transform={this.props.transform}   />
  16.  
  17.             );
  18.         }
  19.     }
  20.  
  21.     //-- add super state: props = state ---
  22.     class AddSuperState extends React.Component
  23.     {
  24.         constructor()
  25.         {
  26.             super();
  27.             this.state =
  28.             {
  29.                id: null,
  30.                href: null,
  31.                transform: null
  32.             };
  33.         }
  34.  
  35.         render()
  36.         {
  37.             return (
  38.                 <Icon className="icon-svg"  id={this.state.id}  href={this.props.href}   transform={this.state.transform}  />
  39.             );
  40.         }
  41.     }
  42.  
  43. showSourceSVG()
  44.  
  45.  
  46. //--random integer---
  47.     function getRandomInt(min, max)
  48.     {
  49.         return Math.floor(Math.random() * (max - min + 1)) + min;
  50.     }
  51.  
  52. var iconArray=[]
  53. var transformArray=[]
  54. var rotate=0
  55. //--checkbox clicked---
  56. function iconSelected(myIcon)
  57. {
  58.      document.getElementById(myIcon+"Check").disabled=true
  59.  
  60.     for(var k=0;k<10;k++)  //--provide a id/key value for each element---
  61.     {
  62.         var transX=getRandomInt(35, 800)
  63.         var transY=getRandomInt(30, 470)
  64.         iconArray.push(<Icon className="icon-svg" key={"icon"+myIcon+k}  id={"icon"+myIcon+k}  href={'iconFonts.svg#'+myIcon}   transform={"translate("+transX+","+transY+")rotate("+rotate+")"} />)
  65.         transformArray.push([transX,transY,myIcon+k,myIcon])
  66.     }
  67.  
  68.     ReactDOM.render(  //--encapsulate in <g> container---
  69.      <g>{ iconArray }</g>
  70.         ,myIcons
  71.     )
  72.  
  73.     //--local function to show svg source on page: React Root SVG Source---
  74.     showSourceSVG()
  75. }
  76. window["iconSelected"]=iconSelected
  77.  
  78.  
  79. //--initial sprites---
  80. airliner0Check.checked=true
  81. airliner0Check.disabled=true
  82. iconSelected("airliner0")
  83.  
  84. //--called from slider---
  85. function rotateSprites()
  86. {
  87.     if(rotate>=0)rotate+=20
  88.     if(rotate>=360)rotate=0
  89.  
  90.     iconArray=[]
  91.     for(var k=0;k<transformArray.length;k++)
  92.     {
  93.         var myTransform=transformArray[k]
  94.         var myTransX=myTransform[0]
  95.         var myTransY=myTransform[1]
  96.  
  97.         var myKey=myTransform[2]
  98.         var myPgon=myTransform[3]
  99.         iconArray.push(<Icon className="icon-svg" key={"icon"+myKey}  id={"icon"+myKey}  href={'iconFonts.svg#'+myPgon}   transform={"translate("+myTransX+","+myTransY+")rotate("+rotate+")"} />)
  100.     }
  101.  
  102.      ReactDOM.render(  //--encapsulate in <g> container---
  103.      <g>{ iconArray }</g>
  104.         ,myIcons
  105.     )
  106.  
  107. }
  108. window["rotateSprites"]=rotateSprites
  109.  
  110.  
  111. //--slider control: adjustable timeout---
  112. var timing = 1000,
  113.     i = 0,
  114.     output = document.getElementById('output');
  115.  
  116. function loop() {
  117.   i++;
  118.   output.innerHTML = i;
  119.   rotateSprites()
  120.   window.setTimeout(loop, timing);
  121. }
  122.  
  123. document.querySelector('input[type="range"]').addEventListener('change', function (e) {
  124.   timing = parseInt(this.value);
  125. });
  126.  
  127. loop();