PayPal SVG Icons

Adding a new SVG icon:

1) Edit the file "/resources/icons/svg-defs.dust"

2) Make sure the SGV icon structured this way:

                
<symbol id="icon-iconGroup-iconName" viewBox="0 0 1024 1024" group="iconGroup">
      <title>iconGroup-iconName</title>
      <keywords>iconKeyword1, iconKeyword2, iconKeyword3, ...</keywords>
      <path class="path1" d="..."></path>
      <path class="path2" d="..."></path>
      <path class="path3" d="..."></path>
      ...
</symbol>
                
            

3) Assign the icon to a group "iconGroup", give it a unique name "iconName", and add keywords that descripes what this icon is about for search convenience "iconKeywords".

4) Add all the pathes elements that draws the icon. Also the best icon size "viewBox" would be 1024.

In Adobe Illustrator, "Save As..." > Save as type: SVG(*.SVG). A pop up will appear. Select "SVG code..." and copy the path(s).

5) Add, Commit, Merge, Test, Push, and have a nice cup of coffee because it is so easy ☺

SVG icon usage:

1) Include this partial into {<pageContent}, preferably at the begining

                
{<pageContent}
    {>"/resources/icons/svg-defs" /}
    ...
{/pageContent}
                
            

2) Include the css file "/resources/css/components/icons-svgs.css"

3) Place this code where you want to use the svg icon

                
<span class="svg circled colorClass">
    <svg class="icon icon-util-access">
        <use xlink:href="#icon-util-access"></use>
    </svg>
</span>
                
            

4) You can add one of the pre-defined colors classes "colorClass" or style your own. Make sure it's at least one level above the svg icon element.