Topic: Button with global icon

Dominik

May 2, 2023 at 12:02 am

Hi there,

if we need global icons in buttons (like an arrow) we don’t use the generateblocks icon method, because icons that are added to global style buttons are not affecting the buttons used on the website. Instead we add it with css pseudo-element :after. This has the disadvantage that it is not affected by currentColor of the buttons text or icon color.

This is an example for our css:

.gb-button-primary:after, .gb-button-secondary:after, .gb-button-primary-neon:after, .gb-button-secondary-neon:after{
  position: relative;
  margin-left:16px !important;
  margin-top: 0.1em;
  content: "";
	background-repeat: no-repeat;
	-webkit-transition: all .15s ease-in-out;
  transition: all 0.5s ease;
  width:10px;
  height: 10px;
}

.gb-button-primary:after{
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Ebene_2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5.64 10.74'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Cg id='Ebene_1-2'%3E%3Cpath class='cls-1' d='m.75,10.74c-.19,0-.38-.07-.53-.22-.29-.29-.29-.77,0-1.06l3.8-3.8c.16-.16.16-.42,0-.57L.22,1.28C-.07.99-.07.51.22.22S.99-.07,1.28.22l3.8,3.8c.74.74.74,1.95,0,2.69l-3.8,3.8c-.15.15-.34.22-.53.22Z'/%3E%3C/g%3E%3C/svg%3E");
}

.gb-button-primary:hover::after{
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Ebene_2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5.64 10.74'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%230d0d0d;%7D%3C/style%3E%3C/defs%3E%3Cg id='Ebene_1-2'%3E%3Cpath class='cls-1' d='m.75,10.74c-.19,0-.38-.07-.53-.22-.29-.29-.29-.77,0-1.06l3.8-3.8c.16-.16.16-.42,0-.57L.22,1.28C-.07.99-.07.51.22.22S.99-.07,1.28.22l3.8,3.8c.74.74.74,1.95,0,2.69l-3.8,3.8c-.15.15-.34.22-.53.22Z'/%3E%3C/g%3E%3C/svg%3E");
  transition: all 0.5s ease;
}

Is there a better way to add icons to button global styles globally?

THANKS und best regards,
Dominik

Fernando
May 2, 2023 at 12:18 am

Hi Dominik,

How about a Local Pattern? Reference: https://docs.generateblocks.com/article/pattern-library-overview/#local-patterns

Would that work for you?
Dominik
May 2, 2023 at 12:32 am

Hi Fernando,

a local pattern would help for inserting the button, but as soon as I want to change the icon, the pattern and global styles do not affect my icon used on the site.
Fernando
May 2, 2023 at 12:40 am

I see. Unfortunately, those are the only two options in GB.

What you can try is a WordPress Reusable Block.

Another approach is to inject the SVG through a PHP snippet instead, but I’m not sure if you’re okay with this too.
Dominik
May 2, 2023 at 3:29 am

Hi Fernando,
through php would be a good solution too. is there a snippet for it?

Fernando

May 2, 2023 at 4:13 pm

Try adding replace-svg to the class list of the Block.

Adding Custom Classes: https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

Then, add this snippet:

add_filter( 'render_block', function( $block_content, $block ) {
    if ( !is_admin() && ! empty( $block['attrs']['className'] ) && strpos( $block['attrs']['className'], 'replace-svg' ) !== false ) {
		$myreplace = 'PLACE SVG CODE HERE';
		$block_content = preg_replace('/' . preg_quote('<svg') . 
                          '.*?' .
                          preg_quote('</svg>') . '/', $myreplace, $block_content);
    }

    return $block_content;
}, 10, 2 );

Adding PHP: https://docs.generatepress.com/article/adding-php/#code-snippets

Replace PLACE SVG CODE HERE in the code.

Dominik
May 2, 2023 at 10:16 pm

perfect – THANKS 🙂
Fernando
May 2, 2023 at 10:37 pm

You’re welcome, Dominik! 🙂

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

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Button with global icon