SVG?

[Dirty Butter]

I see from the GitHub that there is a change coming to stop using Font Awesome and to use SVG icons instead. I have added fa fa-pencil and fa fa-gift to a section on MY content.checkout.confirm.php.

But I don't know how to add something similar to the icon-sprites.svg.

[Al Brookbanks]

You'd need to add a block of code to this file:

https://raw.githubusercontent.com/cubecart/v6/master/skins/foundation/images/icon-sprites.svg

        <symbol id="icon-pencil" viewBox="0 0 1792 1792">
            <path d="M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z"></path>
        </symbol>

Then replace the font awesome code with:

<svg class="icon"><use xlink:href="#icon-pencil"></use></svg>

 

[Dirty Butter]

Thank you for that, Al. But I still need the gift box. I searched online for svg gift box and found plenty of pictures. But I don't understand how to get the path for one of them.

[Dirty Butter]

I did find an IcoMoon page full of free icons that show the SVG code. https://icomoon.io/app/#/select

So I took the code for the gift box, added it to the icon-sprites.svg file. I took off the title line, and it WORKS!!

from icomoon:

<symbol id="icon-gift" viewBox="0 0 32 32">
<title>gift</title>
<path class="path1" d="M24.11 10c0.566-0.402 1.11-0.851 1.608-1.348 1.044-1.044 1.742-2.328 1.966-3.616 0.246-1.412-0.115-2.723-0.988-3.597-0.697-0.697-1.641-1.065-2.73-1.065-1.551 0-3.185 0.744-4.483 2.043-2.077 2.077-3.288 4.945-3.94 6.991-0.482-2.056-1.444-4.833-3.313-6.702-1.003-1.003-2.285-1.518-3.495-1.518-0.989 0-1.931 0.344-2.633 1.046-1.562 1.562-1.351 4.306 0.471 6.128 0.65 0.65 1.409 1.189 2.21 1.638h-6.782v8h2v14h24v-14h2v-8h-5.89zM21.073 4.007c0.866-0.866 1.948-1.384 2.892-1.384 0.334 0 0.803 0.070 1.139 0.406 0.813 0.813 0.357 2.697-0.977 4.031-1.373 1.373-3.221 2.318-4.826 2.939h-1.584c0.58-1.798 1.627-4.264 3.356-5.993zM7.31 5.028c-0.022-0.285-0.002-0.82 0.381-1.203 0.32-0.32 0.743-0.387 1.042-0.387v0c0.664 0 1.358 0.313 1.904 0.859 1.059 1.058 1.93 2.743 2.521 4.871 0.016 0.057 0.031 0.115 0.047 0.171-0.057-0.015-0.114-0.031-0.171-0.047-2.128-0.591-3.813-1.462-4.871-2.521-0.495-0.495-0.805-1.13-0.853-1.743zM14 30h-8v-13h8v13zM14 16h-10v-4h10v4zM26 30h-8v-13h8v13zM28 16h-10v-4h10v4z"></path>
</symbol>

 

Another question about SVG:

I currently have fa-2x on several places:

<div class="show-for-small-only text-center">
  <a href="#" class="left-off-canvas-toggle button white tiny"><i class="fa fa-bars fa-2x"></i></a>
  <a href="#" class="button white tiny show-small-search"><i class="fa fa-search fa-2x"></i></a>
  <a href="#" class="right-off-canvas-toggle button white "><i class="fa fa-shopping-cart fa-2x"></i></a>
  <div id="smallt-basket-detail" class="hide panel radius small-basket-detail-container js_fadeOut"><i class="fa fa-check"></i> Added to Basket</div>
</div>

How do you change the SIZE of an SVG icon?

[bsmither]

I'm researching this now, and my initial conclusion is that you would create this:

<symbol id="icon-gift-2x" viewBox="0 0 64 64">
<title>giftx2</title>
... followed by the rest

An SVG graphic will scale to its viewBox.

Still researching.

[bsmither]

It is possibly this way:

<span style="font-size:2em;"><svg class="icon"><use xlink:href="#icon-pencil"></use></svg></span>

 

[Dirty Butter]

I see this line in stock 6.0.13 box.basket.php

      <div class="show-for-small-only"><a class="right-off-canvas-toggle button white tiny" href="#"><svg class="icon icon-basket icon-x2"><use xlink:href="#icon-basket"></use></svg></a></div>

<svg class="icon icon-basket icon-x2">

I just tested it and it DOES double the size of the icon.

[Al Brookbanks]

That's right Rosemary. The foundation skin only used fa-x2 which doubles the size. I added a class to the cubecart.css file to mimic this and you found it. ???

You can use CSS to change size and colour.