[Resolved] How find codes of SVG icons

Home Forums Support [Resolved] How find codes of SVG icons

Home Forums Support How find codes of SVG icons

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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!

    #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

    A wise man once said:
    "Have you cleared your cache?"

    #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:

    IMAGE HERE
    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&#8221; 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>

    #1797673
    Leo
    Staff
    Customer Support

    Perhaps a video like this would help:

    #1799778
    Stefano

    Thanks Leo, is what I was looking for. ๐Ÿ™‚

    #1800578
    Leo
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.