title: Does wrapping my SVG icons inside a SPAN give me more styling capatilities and flexibility?
body: <p>I'm currently building an icon component for my React appplication. It will receive a <code>path</code> string as <code>props</code> and render an <code>&lt;svg&gt;</code> with it.</p>
  
  <p>Something like this:</p>
  
  <p><strong>Constants File:</strong></p>
  
  <pre><code>export const ICONS = {
    BUBBLE: 'M512 64c282.77 0 512 186.25 ...',
    ENLARGE2: 'M1024 0v416l-160-160-192 192-96-96 ...',
  </code></pre>
  
  <p><strong>The component will be consumed like this:</strong></p>
  
  <pre><code>import Icon from './Icon.js';
  import {ICONS} from '../../constants';
  
  &lt;Icon icons={ICONS.BUBBLE}/&gt;
  </code></pre>
  
  <p><strong>Component File: Icon.js</strong></p>
  
  <pre><code>const Icon = props =&gt; (
    &lt;svg width="22" height="22" viewBox="0 0 1024 1024"&gt;
      &lt;path d={icons[props.icon]}&gt;&lt;/path&gt;
    &lt;/svg&gt;
  );
  </code></pre>
  
  <p><strong>QUESTION</strong></p>
  
  <p>Do I gain any CSS styling capabilites or flexibility by wrapping the returned <code>&lt;svg&gt;</code> inside a <code>&lt;span&gt;</code> or does every style that I could apply to a <code>&lt;span&gt;</code> I'm also able to apply to the <code>&lt;svg&gt;</code> directly? For example: display, position, etc. I'll be using styled-components to style it.</p>
  
  <p>Something like:</p>
  
  <pre><code>&lt;span&gt;
    &lt;svg width="22" height="22" viewBox="0 0 1024 1024"&gt;
      &lt;path d={icons[props.icon]}&gt;&lt;/path&gt;
    &lt;/svg&gt;
  &lt;/span&gt;
  </code></pre>