Refactor icons, closes LEA-1776

[tigranpetrossian]

This PR improves our icon set, adds some features and addresses the repetitivness in individual icon files, as well as adds missing sizes/platform-specific versions of existing icons.

Color support in mobile

Before

import { useTheme, Theme } from '@leather.io/native'

function Page() {
  const theme = useTheme<Theme>()
  return <PlusIcon color={theme.colors['ink.background-primary']} />
}

After

function Page() {
  return <PlusIcon color="ink.background-primary" />
}

HOC vs. repetitive control flow for creating icons

Before

import { forwardRef } from 'react';

import ArrowLeftSmall from '../assets/icons/arrow-left-16-16.svg';
import ArrowLeft from '../assets/icons/arrow-left-24-24.svg';
import { Icon, IconProps } from './icon/icon.web';

export const ArrowLeftIcon = forwardRef<SVGSVGElement, IconProps>(({ variant, ...props }, ref) => {
  if (variant === 'small')
    return (
      <Icon ref={ref} {...props}>
        <ArrowLeftSmall />
      </Icon>
    );
  return (
    <Icon ref={ref} {...props}>
      <ArrowLeft />
    </Icon>
  );
});

ArrowLeftIcon.displayName = 'ArrowLeftIcon';

After

import ArrowLeft16 from '../assets/icons/arrow-left-16-16.svg';
import ArrowLeft24 from '../assets/icons/arrow-left-24-24.svg';
import { createWebIcon } from './icon/create-icon.web';

export const ArrowLeftIcon = createWebIcon({
  icon: {
    small: ArrowLeft16,
    medium: ArrowLeft24,
  },
  displayName: 'ArrowLeft',
});

New size variant + ability to specify the default size when necessary

export const AnimalRabbitIcon = createNativeIcon({
  icon: {
    large: AnimalRabbit,
  },
  defaultVariant: 'large',
  displayName: 'AnimalRabbitIcon',
});

P.S.
The idea I had initially was to entirely automate generation of icons from either the SVG folder or the Figma file. I have a working version of this (in fact icon file changes in this file were generated by it), but it's still unstable at places, and needs some work to make updates completely effortless. Planning to add it during one of the following cooldowns.

[linear]

LEA-1776 Refactor icons

[pete-watters]

Can you introduce a types file and share the types between web and native?

[tigranpetrossian]

Good call. Re-used both this and the size map.

[pete-watters]

Great work here @tigranpetrossian 👏

The only blocker to merge is some type duplication

Did you have any luck adding support for URL icons? We will need that for SIP-10 tokens

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 40.47%. Comparing base (08c46c2) to head (12cdc7b).
Report is 2 commits behind head on dev.

Additional details and impacted files

@@           Coverage Diff           @@
##              dev     #844   +/-   ##
=======================================
  Coverage   40.47%   40.47%           
=======================================
  Files         204      204           
  Lines        9585     9585           
  Branches      570      570           
=======================================
  Hits         3880     3880           
  Misses       5705     5705           

Components	Coverage Δ
bitcoin	64.15% <ø> (ø)
query	12.82% <ø> (ø)
utils	83.38% <ø> (ø)
crypto	68.21% <ø> (ø)
stacks	69.77% <ø> (ø)

[tigranpetrossian]

Great work here @tigranpetrossian 👏

The only blocker to merge is some type duplication

Did you have any luck adding support for URL icons? We will need that for SIP-10 tokens

@pete-watters 👍 The URL support is for Avatars I believe, this PR is just for the icon system.
I did add URL support (generic image support, including URIs) to the mobile Avatar, the web version already supported it. The Avatar revamp was blocked by this and is at 95% mark, will PR very soon.

[fbwoolf]

Hoping you release and do a fast follow updating the extension. Also, please update and address fixes in the extension with panda-preset pkg changes.

[tigranpetrossian]

Hoping you release and do a fast follow updating the extension. Also, please update and address fixes in the extension with panda-preset pkg changes.

@fbwoolf Hey Fara, there should be no breaking changes for the extension here. Which panda-preset changes are you referring to?

[fbwoolf]

@fbwoolf Hey Fara, there should be no breaking changes for the extension here. Which panda-preset changes are you referring to?

Install the update and see type errors. I had to revert the update yest. I just said pls do the update in the extension right away. I don't know if there are breaking changes. It should be part of this work to do both updates imo.

[fbwoolf]

@tigranpetrossian it was actually the ui lib update I had to revert. Sorry, I had that incorrect.

[kyranjamie]

Fantastic @tigranpetrossian 👏🏼

[tigranpetrossian]

@fbwoolf Hey Fara, there should be no breaking changes for the extension here. Which panda-preset changes are you referring to?

Install the update and see type errors. I had to revert the update yest. I just said pls do the update in the extension right away. I don't know if there are breaking changes. It should be part of this work to do both updates imo.

@fbwoolf Ah I see, that's probably the Badge updates. There was a PR addressing those changes in draft mode against the extension, I updated it few hours ago and will merge shortly. This particular PR doesn't add any breaking changes.
Typically all breaking changes to the ui library come with a corresponding draft PR to the extension, to be updated and merged once new ui version is released. This isn't ideal, and there are couple ways we can address this in the future, but just something to be aware of, at least when it comes to the ui.

[fbwoolf]

@fbwoolf Ah I see, that's probably the Badge updates. There was a PR addressing those changes in draft mode against the extension, I updated it few hours ago and will merge shortly. This particular PR doesn't add any breaking changes. Typically all breaking changes to the ui library come with a corresponding draft PR to the extension, to be updated and merged once new ui version is released. This isn't ideal, and there are couple ways we can address this in the future, but just something to be aware of, at least when it comes to the ui.

Great, thx for clarifying.