Component icons

[perillosantana]

Expected behavior

Nowadays we do not have the option of inserting icons based on client layouts, the idea is to have the option of inserting our source icons and manipulating the component to work with our icons.

Current Behavior

the current behavior allows calling a font, but does not allow manipulating the component to insert our icon (font or img / svg), we are manipulating the element with before and after.

Context

The idea is to achieve greater precision in relation to customer layouts

[matheusps]

Hey @perillosantana ! You can change all the icons used on header or any other component by changing it's svg inside store-icons. Its that what you're looking for ?

[perillosantana]

Hi @matheusps, with the store-icons can I customize an icon with any svg I want?

[matheusps]

Yep @perillosantana . Actually you can add an entirelly new iconpack. This is how you do it:

1. Go to your store-theme/styles
2. Add a new folder called iconpacks
3. Create a new file iconpack.svg with your id's. Like here.

Obs: You should not change the ID's, the store-icons use them on it's components.

[jpgutti]

@matheusps Are you saying that is up to us to build our own icon pack and make a pull request or we can do that in our project folder without the need of a PR?

[matheusps]

@jpgutti , You guys use the store-theme to build your own theme, right? The iconpack behaves the same. And yes, if you want different icons, is up to you to build a new iconpack that follows the same structure of the one inside store-icons.

[jpgutti]

@matheusps Awesome, thanks!

[matheusps]

You're welcome @jpgutti

[perillosantana]

@matheusps As I use a new one, I saw that inside the react folder there are the files calling the Icon, so when I use the iconpack I get the id of a guy that already exists, how do I create one from zero picking up from inside my iconpack?

https://github.com/vtex-apps/store-icons/blob/master/react/IconSearch.tsx

[micas06gua]

@matheusps , this does not work to exchange icons of the native components?

[matheusps]

@perillosantana, @micas06gua,

Take IconSearch as example:

const IconSearch = (props: IconProps) => {
  return <Icon id="hpa-search" {...props} />
}

The Id hpa-search is defined on iconpack.svg, right ? (that why you may not change the ID) So, in your store-theme you do like,

Yep @perillosantana . Actually you can add an entirelly new iconpack. This is how you do it:

1. Go to your store-theme/styles
2. Add a new folder called iconpacks
3. Create a new file iconpack.svg with your id's. Like here.

Obs: You should not change the ID's, the store-icons use them on it's components.

And YES, your new iconpack will be used instead of the original one contained on store-icons. Got it ?

[gustavo-vasconcellos]

@matheusps This component Icon is imported of which module?

[perillosantana]

@matheusps To test replacing the hpa-hamburger-menu path for the hpa-search id path, in the component I call the import {IconMenu} from 'vtex.store-icons' and the <IconMenu size = {10} />, but it continues to render the hpa-hamburger-menu icon, my folder respects the requested structure /styles/iconpacks/iconpack.svg, any idea why it does not overwrite?

Another question is, can I create an id and call with Icon?