How find codes of SVG icons

This topic has 7 replies, 4 voices, and was last updated 1 year, 4 months ago by Leo.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
May 24, 2021 at 11:54 pm #1796859

Stefano

Hello,

I can’t understand how can I find the code for updating more svg icons? Premium themes have different icons, which are not present among the clickable ones, but are loaded by codes like this:

<svg viewBox=”0 0 60 42.35″ xmlns=”http://www.w3.org/2000/svg”><path d=”M47.47 15.76c-.12-1.31-.03-4.86 3.37-9.8.26-.37.21-.88-.11-1.19-1.39-1.39-2.25-2.26-2.85-2.87-.79-.81-1.15-1.18-1.68-1.66a.945.945 0 00-1.25-.01c-5.93 5.16-12.52 15.82-11.56 28.89.56 7.67 6.15 13.24 13.3 13.24 7.34 0 13.31-5.97 13.31-13.31 0-7.08-5.56-12.88-12.53-13.29zm-.78 24.72c-6.14 0-10.95-4.84-11.43-11.5-1.07-14.69 7.66-24.23 10.3-26.76.26.25.55.55.98.99.52.53 1.24 1.26 2.32 2.34-4.13 6.36-3.35 10.9-3.01 11.55.16.31.49.52.84.52 6.3 0 11.43 5.13 11.43 11.43S53 40.48 46.69 40.48zM14.17 15.76c-.12-1.3-.03-4.85 3.37-9.8.26-.37.21-.88-.11-1.19-1.38-1.38-2.24-2.26-2.84-2.87C13.8 1.09 13.43.72 12.9.24a.945.945 0 00-1.25-.01C5.73 5.39-.86 16.05.09 29.12c.56 7.67 6.16 13.24 13.31 13.24 7.34 0 13.31-5.97 13.31-13.31-.01-7.08-5.56-12.89-12.54-13.29zm-.77 24.72c-6.14 0-10.95-4.84-11.44-11.5C.89 14.28 9.63 4.74 12.26 2.22c.26.25.55.55.99 1 .52.53 1.23 1.26 2.31 2.34-4.13 6.36-3.35 10.9-3.01 11.55.16.31.5.52.84.52 6.3 0 11.43 5.13 11.43 11.43.01 6.29-5.12 11.42-11.42 11.42z”></path></svg>

So, where can I find these codes for updating other icons?

Thank you in advance!

May 25, 2021 at 1:30 am #1796971
Elvin
Staff
Customer Support
Hi Stefano,

Are you trying to change the default icons of GeneratePress and/or GP Premium?

If so, you’ll need a filter for that. We can use generate_svg_icon for that.

For GeneratePress(theme), here’s the default SVG codes: https://github.com/tomusborne/generatepress/blob/b60b853630da6d9015722da903e53c8064148b0a/inc/theme-functions.php#L276-L341

Example: Changing shopping cart icon.
```
add_filter( 'generate_svg_icon', function( $output, $icon ) {
    if ( 'shopping-cart' === $icon ) {
        $svg = '<svg viewBox="0 0 95 89.4" aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M92.9 18.4c-1.8-2.3-4.6-3.7-7.5-3.7H24.5l-1.9-7.4C21.5 3 17.7 0 13.3 0H3.1C1.4 0 0 1.4 0 3.1s1.4 3.1 3.1 3.1h10.2c1.5 0 2.8 1 3.2 2.5l12.2 48.6c1.1 4.3 4.9 7.3 9.3 7.3h39.9c4.4 0 8.3-3 9.3-7.3l7.5-30.8c.7-2.8.1-5.8-1.8-8.1zm-4.3 6.7l-7.5 30.8c-.4 1.5-1.7 2.5-3.2 2.5H38c-1.5 0-2.8-1-3.2-2.5L26.1 21h59.3c1 0 2 .5 2.6 1.3.6.8.9 1.8.6 2.8zM40.1 68.6c-5.7 0-10.4 4.7-10.4 10.4s4.7 10.4 10.4 10.4S50.5 84.7 50.5 79s-4.7-10.4-10.4-10.4zm0 14.5c-2.3 0-4.1-1.8-4.1-4.1s1.8-4.1 4.1-4.1 4.1 1.8 4.1 4.1c0 2.2-1.9 4.1-4.1 4.1zM74.5 68.6c-5.7 0-10.4 4.7-10.4 10.4s4.7 10.4 10.4 10.4S84.9 84.7 84.9 79c-.1-5.7-4.7-10.4-10.4-10.4zm0 14.5c-2.3 0-4.1-1.8-4.1-4.1s1.8-4.1 4.1-4.1 4.1 1.8 4.1 4.1c0 2.2-1.9 4.1-4.1 4.1z"/></svg>';

        return sprintf(
            '<span class="gp-icon %1$s">
                %2$s
            </span>',
            $icon,
            $svg
        );
    }

    return $output;
}, 15, 2 );
```
For premium, the icon handle names are:
```
shopping-bag
shopping-cart
shopping-basket
spinner
pro-menu-bars
pro-close
```
May 25, 2021 at 6:56 am #1797514

Stefano

Hi Elvin,

thank you for your reply.

My question is actually simpler, I just want to know where to get or generate these codes, please see this screenshot:

Link to image: https://www.carettacaretta.eu/test03/wp-content/uploads/2021/05/gp-ticket01.png

As you can see those icons are not present to be clicked, but they are still available from codes like the one I will post below (which is of icon number 3).

Well, where do they get or generate these codes of the other svg icons? I see that they all contain this url: http://www.w3.org/2000/svg.

Code icon nr. 3:
<svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 60.001 90.93″><path d=”M30.002 44.209c4.825 0 8.686-3.861 8.686-8.686s-3.861-8.686-8.686-8.686-8.686 3.861-8.686 8.686a8.65 8.65 0 008.686 8.686zm0-11.581c1.641 0 2.895 1.254 2.895 2.895s-1.254 2.895-2.895 2.895-2.895-1.254-2.895-2.895c-.001-1.641 1.253-2.895 2.895-2.895zM6.694 67.623c.741 0 1.483-.318 2.119-.848l6.568-6.038c1.377 3.602 3.178 6.991 5.403 10.276 1.907 2.754 6.251 3.708 9.747 3.708h.106c2.225 0 6.251-.424 8.157-3.178 2.331-3.496 4.237-7.097 5.72-10.805l6.568 6.038c.635.53 1.377.848 2.119.848.848 0 1.695-.318 2.331-1.06 3.072-3.283 4.662-7.733 4.45-12.183-.212-4.555-2.119-8.687-5.509-11.76-1.483-1.271-3.602-2.966-6.145-4.026-.529-12.819-5.932-27.578-15.996-37.642C31.696.318 30.955 0 30.107 0s-1.695.318-2.225.954c-9.959 10.065-15.468 24.823-15.997 37.642-2.649.954-4.767 2.754-6.357 4.026-3.39 3.072-5.297 7.204-5.509 11.76s1.377 8.899 4.449 12.183c.531.74 1.379 1.058 2.226 1.058zm40.575-16.42c.318-1.907.636-3.708.742-5.509.635.424 1.377 1.06 2.119 1.695 2.225 1.801 3.39 4.45 3.496 7.31.106 1.801-.318 3.496-.954 4.979l-6.039-5.509c.212-.953.424-2.012.636-2.966zM33.498 68.047c-1.271.742-6.357.424-7.522-.529-1.589-2.436-2.966-4.872-4.026-7.415 2.649.847 5.403 1.271 8.052 1.271s5.297-.424 7.84-1.165c-1.166 2.754-2.649 5.296-4.344 7.838zM30.002 7.84a48.666 48.666 0 012.966 3.602c-1.907.53-3.92.53-5.827 0 .847-1.272 1.801-2.437 2.861-3.602zm-6.463 9.111c2.013.848 4.238 1.271 6.462 1.271 2.225 0 4.449-.424 6.568-1.271 5.085 9.11 6.673 22.387 4.556 33.087-.106.635-.318 1.271-.424 2.013-6.568 3.92-14.832 3.92-21.401-.106-.106-.53-.212-1.165-.318-1.695-2.117-10.807-.528-24.083 4.557-33.299zM9.661 47.283a10.362 10.362 0 012.225-1.695c.212 1.907.424 3.814.848 5.827.212.954.424 1.907.636 2.754l-6.039 5.509a10.215 10.215 0 01-.953-4.979c-.002-2.86 1.164-5.509 3.283-7.416zm17.162 33.371v7.098c0 1.801 1.377 3.178 3.178 3.178s3.178-1.377 3.178-3.178v-7.098c0-1.801-1.377-3.178-3.178-3.178s-3.178 1.377-3.178 3.178zm8.687-2.013v6.145c0 1.801 1.377 3.179 3.178 3.179s3.178-1.377 3.178-3.179v-6.145c0-1.801-1.377-3.178-3.178-3.178-1.8 0-3.178 1.377-3.178 3.178zm-17.374 0v5.085c0 1.801 1.377 3.178 3.178 3.178s3.178-1.377 3.178-3.178v-5.085c0-1.801-1.377-3.178-3.178-3.178s-3.178 1.377-3.178 3.178z”></path></svg>

May 25, 2021 at 8:56 am #1797673

Leo
Staff
Customer Support

Perhaps a video like this would help:

May 27, 2021 at 12:15 am #1799778

Stefano

Thanks Leo, is what I was looking for. 🙂

May 27, 2021 at 10:01 am #1800578

Leo
Staff
Customer Support

No problem 🙂

December 16, 2022 at 3:04 pm #2464623

Brandon

Hi I have the same question here but the answer above does not work. I am editing the Ethos theme and the icons are referenced in this code: <svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 69.709 61″><path d=”M11.337 10.997H.851a.767.767 0 01-.763-.682A12.77 12.77 0 010 8.877c0-2.319.626-4.51 1.762-6.168C2.959.962 4.579 0 6.325 0a.768.768 0 010 1.536c-1.223 0-2.393.725-3.295 2.041-.963 1.406-1.494 3.287-1.494 5.3 0 .187.006.381.018.583h9.783a.768.768 0 010 1.537z”></path><path d=”M57.529 61H17.436c-3.591 0-6.624-4.065-6.624-8.876V8.877c0-2.051-.482-3.941-1.358-5.322-.825-1.302-1.936-2.019-3.129-2.019a.768.768 0 010-1.536h45.949c3.434 0 6.024 3.816 6.024 8.876v41.589a.768.768 0 01-1.536 0V8.876c0-2.051-.482-3.941-1.358-5.322-.825-1.301-1.936-2.018-3.129-2.018H9.802c1.561 1.571 2.546 4.219 2.546 7.34v43.247c0 1.978.578 3.852 1.628 5.278.965 1.311 2.226 2.062 3.46 2.062h40.093a.768.768 0 010 1.537z”></path><path d=”M20.846 55.599l-.289-.003a4.167 4.167 0 01-1.706-.397c-1.747-.824-2.633-2.372-2.633-4.599V10.228a32.237 32.237 0 00-.39-4.988.769.769 0 01.756-.901l1.752.001h32.517c.247 0 .489.043.721.126 1.571.567 2.668 2.936 2.668 5.761v40.406a.768.768 0 01-1.536 0V10.228c0-2.537-.987-4.076-1.654-4.316a.587.587 0 00-.199-.035H17.473c.121.941.281 2.529.281 4.353v40.372c0 1.626.557 2.645 1.752 3.209.335.158.699.242 1.082.25.184.004.352.002.452.001h.071l1.484-.003h.001a.768.768 0 01.001 1.537l-1.486.003h-.265z”></path><path d=”M63.385 61H17.436a.768.768 0 010-1.536c1.223 0 2.393-.725 3.295-2.041.963-1.405 1.493-3.287 1.493-5.299v-1.351c0-.424.344-.768.768-.768h45.949c.424 0 .768.344.768.768v1.352c0 2.319-.626 4.509-1.762 6.167C66.75 60.038 65.13 61 63.385 61zm-42.372-1.536h42.372c1.223 0 2.393-.725 3.295-2.041.963-1.405 1.493-3.287 1.493-5.299v-.584H23.76v.583c0 2.319-.626 4.51-1.762 6.168a7.552 7.552 0 01-.985 1.173z”></path><path d=”M45.957 18.427H24.476a.768.768 0 010-1.536h21.481a.768.768 0 010 1.536zM45.957 23.011H24.476a.768.768 0 010-1.536h21.481a.768.768 0 010 1.536zM45.957 27.596H24.476a.768.768 0 010-1.536h21.481a.768.768 0 010 1.536zM45.957 32.181H24.476a.768.768 0 010-1.536h21.481a.768.768 0 010 1.536zM38.156 36.765h-13.68a.768.768 0 010-1.536h13.68a.768.768 0 010 1.536z”></path></svg>

Where do I edit the above code to reference the icon that I want to insert. I am not sure what those codes even mean.

December 16, 2022 at 5:16 pm #2464681

Leo
Staff
Customer Support

Can you open a new topic for your question?

Thanks.
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

[Resolved] How find codes of SVG icons

Popular Articles

Start building better websites today.