Icons

First Step is to register icons as symbols with display none in plugin footer. Then you can follow DRY approach and reuse the path code.

Copy Entire SVG Icon set code here.

Delete

Click to copy
 
<svg height="24px" width="24px">
    <use xlink:href="#delete" />
</svg>

Copy

Click to copy
 
<svg height="24px" width="24px">
    <use xlink:href="#copy" />
</svg>

Download

Click to copy
 
<svg height="24px" width="24px">
    <use xlink:href="#download" />
</svg>

Upload

Click to copy
 
<svg height="24px" width="24px">
    <use xlink:href="#upload" />
</svg>

Done

Click to copy
 
<svg height="24px" width="24px">
    <use xlink:href="#done" />
</svg>

Close

Click to copy
 
<svg height="24px" width="24px">
    <use xlink:href="#close" />
</svg>

Expand

Click to copy
 
<svg height="24px" width="24px">
    <use xlink:href="#expand" />
</svg>

Chevron Right

Click to copy
 
<svg height="24px" width="24px">
    <use xlink:href="#chevron-right" />
</svg>

Info

Click to copy
 
<svg height="24px" width="24px">
    <use xlink:href="#info" />
</svg>

Clipboard

Click to copy
 
<svg height="24px" width="24px">
    <use xlink:href="#clipboard" />
</svg>

SVG Symbols

Click to copy
 
<!-- include SVG Files in plugin footer -->
<svg viewBox="0 0 24 24" style="display:none">
    
    <!-- Delete -->
    <symbol id="delete" height="24px" width="24px" viewBox="0 0 24 24" fill="currentColor">
        <path d="M0 0h24v24H0z" fill="none"/>
        <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
    </symbol>
    <!-- End of Delete -->

    <!-- Copy -->
    <symbol id="copy" height="24px" width="24px" viewBox="0 0 24 24" fill="currentColor">
        <path d="M0 0h24v24H0z" fill="none"/>
        <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
    </symbol>
    <!-- End of Copy -->

    <!-- Download -->
    <symbol id="download" height="24px" width="24px" viewBox="0 0 24 24" fill="currentColor">
        <path d="M0 0h24v24H0z" fill="none"/>
        <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
    </symbol>
    <!-- End of Download -->

    <!-- Upload -->
    <symbol id="upload" height="24px" width="24px" viewBox="0 0 24 24" fill="currentColor">
        <path d="M0 0h24v24H0z" fill="none"/>
        <path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/>
    </symbol>
    <!-- End of Upload -->

    <!-- Done -->
    <symbol id="done" height="24px" width="24px" viewBox="0 0 24 24" fill="currentColor">
        <path d="M0 0h24v24H0V0z" fill="none"/>
        <path d="M5 18h14v2H5v-2zm4.6-2.7L5 10.7l2-1.9 2.6 2.6L17 4l2 2-9.4 9.3z"/>
    </symbol>
    <!-- End of Done -->

    <!-- Close -->
    <symbol id="close" height="24px" width="24px" viewBox="0 0 24 24" fill="currentColor">
        <path d="M0 0h24v24H0z" fill="none"/>
        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
    </symbol>
    <!-- End of Close -->

    <!-- Expand -->
    <symbol id="expand" height="24px" width="24px" viewBox="0 0 24 24" fill="currentColor">
        <path d="M24 24H0V0h24v24z" fill="none" opacity=".87"/>
        <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"/>
    </symbol>
    <!-- End of Expand -->

    <!-- Chevron Right -->
    <symbol id="chevron-right" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
        <path d="M0 0h24v24H0V0z" fill="none"/><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"/>
    </symbol>
    <!-- End od Chevron Right -->

    <!-- Info -->
    <symbol id="info" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
        <path d="M0 0h24v24H0V0z" fill="none"/>
        <path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
    </symbol>    
    <!-- End of Info -->

    <!-- Clipboard -->
      <symbol id="clipboard" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
            <path d="M11,1 C12.235,1 13.2895,1.7581 13.75196,2.828465 L13.82,3 L18,3 C19.05,3 19.9177686,3.82004132 19.9944872,4.85130541 L20,5 L20,11 L18,11 L18,5 L16,5 L16,8 L6,8 L6,5 L4,5 L4,21 L18,21 L18,17 L20,17 L20,21 C20,22.05 19.1799587,22.9177686 18.1486946,22.9944872 L18,23 L4,23 C2.95,23 2.0822314,22.1799587 2.00551277,21.1486946 L2,21 L2,5 C2,3.95 2.82004132,3.0822314 3.85130541,3.00551277 L4,3 L8.18,3 C8.6,1.84 9.7,1 11,1 Z M10.99,10 L10.99,13 L23,13 L23,15 L10.99,15 L10.99,18 L7,14 L10.99,10 Z M11,3 C10.45,3 10,3.45 10,4 C10,4.55 10.45,5 11,5 C11.55,5 12,4.55 12,4 C12,3.45 11.55,3 11,3 Z" ></path>        
    </symbol>
    <!-- End of Clipboard -->

</svg>

Comments Area

No comments have been posted yet. Please feel free to comment first!

Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!

LEAVE A COMMENT

Please add to the discussion in a constructive way. If you disagree, please be polite.

In the same area