title: how to use svg into lightning component in Salesforce
body: <p>I am following this tutorial : <a href="https://archive-2_1_4.lightningdesignsystem.com/resources/lightning-svg-icon-component-helper" rel="nofollow noreferrer">https://archive-2_1_4.lightningdesignsystem.com/resources/lightning-svg-icon-component-helper</a> on how to use svg on lightning component but for some reason it is not working for my case:</p>
  
  <p>I have already created the component svgIcon and added all the code into it.</p>
  
  <p>In my case it does not seem to work since its showing a non sense blue square.</p>
  
  <p>I uploaded the svg file into static resource and tried smth like this:</p>
  
  <pre><code>&lt;c:svgIcon svgPath="{!$Resource.feedIcon}" category="standard" size="large" name="user" /&gt;
  </code></pre>
  
  <p>While this part on the tutorial looks as following:</p>
  
  <pre><code>&lt;c:svgIcon svgPath="/resource/slds214/assets/icons/standard-sprite/svg/symbols.svg#user" category="standard" size="large" name="user" /&gt;
  </code></pre>
  
  <p>Dosnt specify where does they store the svg and also dont know what #user stands for in this case</p>
  
  <p>The svg file I uploaded to salesforce static resources looks as below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;?xml version="1.0" encoding="UTF-8"?&gt;
      &lt;svg width="82px" height="82px" viewBox="0 0 82 82" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
          &lt;!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com --&gt;
          &lt;title&gt;Group 4&lt;/title&gt;
          &lt;desc&gt;Created with Sketch.&lt;/desc&gt;
          &lt;g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"&gt;
              &lt;g id="Icons-for-svg-export" transform="translate(-119.000000, -118.000000)" fill="#8B8D8E"&gt;
                  &lt;g id="Group-4" transform="translate(120.000000, 119.000000)"&gt;
                      &lt;g id="Group-3" stroke="#8B8D8E" stroke-width="0.4"&gt;
                          &lt;g id="chat"&gt;
                              &lt;path d="M68.2614576,11.7212036 C60.7001948,4.16069852 50.6693958,0 39.979772,0 C29.2899367,0 19.2593492,4.16069852 11.6980863,11.7212036 C-2.91552041,26.3339658 -3.9306097,49.72521 9.17822921,65.5056316 C7.8922944,68.0929603 5.8291323,71.1039699 2.76758412,72.6094747 C1.2957998,73.3363284 0.467405755,74.9094868 0.720913785,76.5331741 C0.974421815,78.1568613 2.22652736,79.4253669 3.85033192,79.6788567 C4.61106745,79.7976733 5.69381525,79.9158558 7.01273359,79.9158558 C10.5485257,79.9158558 15.758232,79.0866759 21.0861293,75.2481778 C27.0229533,78.4441778 33.5185944,80 39.9632802,80 C50.3144,80 60.5646663,75.9921564 68.2779494,68.2796421 C75.8390008,60.7189256 80,50.6899085 80,40 C80,29.3111486 75.8216633,19.2810744 68.2614576,11.7212036 Z M65.0303403,65.0489696 C53.6129644,76.4655204 35.9369638,78.7314944 22.0335601,70.5631637 C21.12017,70.0213003 19.9868898,70.1906458 19.2593492,70.9181338 C19.1916907,70.9521721 19.1238207,71.0024894 19.0734997,71.0528068 C14.4896347,74.6048341 9.99013149,75.3488126 7.01273359,75.3488126 L6.99624183,75.3488126 C10.429489,72.8458396 12.5949846,69.1253125 13.863582,66.2331196 C14.066769,65.7426308 14.1005982,65.2348057 13.9817729,64.7614417 C13.9314519,64.3047796 13.7456024,63.8481176 13.4233787,63.4755998 C1.04229177,49.4882108 1.68483631,28.1779502 14.9125005,14.9512418 C28.7317539,1.13298696 51.2112983,1.13298696 65.0130028,14.9512418 C78.8495937,28.7692852 78.8495937,51.2307148 65.0303403,65.0489696 Z" id="Fill-1"&gt;&lt;/path&gt;
                          &lt;/g&gt;
                      &lt;/g&gt;
                      &lt;path d="M40,39 C45.5228475,39 50,34.5228475 50,29 C50,23.4771525 45.5228475,19 40,19 C34.4771525,19 30,23.4771525 30,29 C30,34.5228475 34.4771525,39 40,39 Z M40,34 C37.2385763,34 35,31.7614237 35,29 C35,26.2385763 37.2385763,24 40,24 C42.7614237,24 45,26.2385763 45,29 C45,31.7614237 42.7614237,34 40,34 Z" id="Oval" fill-rule="nonzero"&gt;&lt;/path&gt;
                      &lt;path d="M53.3820358,52.1419451 L53.3820358,58.0287934 L58.3820358,58.0287934 L58.3820358,52.0610237 C58.3820358,50.6620146 57.7745968,49.3319332 56.7172836,48.4157917 L56.7172836,48.4157917 C47.0341731,40.0255636 32.5627654,40.3598339 23.2773818,49.188209 C22.7810083,49.660152 22.5,50.3150789 22.5,51 L22.5,58.0287934 L27.5,58.0287934 L27.5,52.1101962 C34.9103462,45.7645802 45.9109476,45.7203441 53.3820358,52.1419451 Z" id="Path-3" fill-rule="nonzero"&gt;&lt;/path&gt;
                  &lt;/g&gt;
              &lt;/g&gt;
          &lt;/g&gt;
      &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any idea how can I use svg icons in lightening component?</p>