O padrão do projeto é criar um arquivo chamado styles.ts ou styles.tsx na pasta onde vão ser feitas as modificações, tanto nos plugins quanto no banking-app . No arquivo styles temos duas opções, usar o ícone com atributos do tema do Design System, ou usar sem. Para usar sem, utilize esse formato:

import styled from 'styled-components';

import {Icon} from '@vizir-banking/banking-app-core/dist/layout';

export const SaldoGarantido = styled(Icon).attrs(() => ({

name: 'nome_que_você_vai_utilizar',

size: tamanho em número do icone, por exemplo 64 para um ícone de 64x64,

}))``;

Para usar com o tema do Design System. (O exemplo dado está dentro do banking-app-core , caso esteja em outro plugin, verifique a importação do exemplo acima):

import styled from 'styled-components';

import {View, Icon as BaseIcon} from '~/layout';

import {Theme} from '~/theme/types';

export const FreteBackIcon = styled(BaseIcon).attrs(

({theme}: {theme: Theme}) => ({

name: 'frete_back_icon',

size: 40,

color: theme.colors.header.icon,

}),

)``;

Feito isso, basta importar o componente estilizado criado e utiliza-lo na página ou componente que desejar.

import {FreteBackIcon} from '~/layout/navbar/home-header/home-header.styles';

const BackButton = () => (

<View>

<TouchableOpacity onPress={() => handleBackButton()}>

</TouchableOpacity>

</View>

);

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.