[C-3431] Add universal harmony icons (#6877)

packages/harmony/.svgrrc.js

@@ -1,4 +1,7 @@
 module.exports = {
-  template: require('./svgr-template'),
-  dimensions: false
+  template: require('../../svgr-template'),
+  dimensions: false,
+  replaceAttrValues: {
+    red: '{props.fill}'
+  }
 }

packages/harmony/src/components/icon.ts

@@ -0,0 +1,27 @@
+import type { ComponentType, SVGProps } from 'react'
+
+import type { IconColors } from 'foundations'
+
+export const iconSizes = {
+  xs: 14,
+  s: 16,
+  m: 20,
+  l: 24,
+  xl: 30,
+  '2xl': 32
+}
+
+type IconSize = keyof typeof iconSizes
+
+type SVGBaseProps = SVGProps<SVGSVGElement>
+
+export type IconProps = {
+  color?: IconColors
+  size?: IconSize
+  sizeW?: IconSize
+  sizeH?: IconSize
+}
+
+type SVGIconProps = SVGBaseProps & IconProps
+
+export type IconComponent = ComponentType<SVGBaseProps | SVGIconProps>

packages/harmony/src/foundations/theme/theme.ts

@@ -1,4 +1,3 @@
-import { iconSizes } from '../../components/icon'
 import type { ColorTheme } from '../color'
 import { colorTheme } from '../color'
 import { CornerRadius, cornerRadius } from '../corner-radius'
@@ -10,6 +9,15 @@ import type { Typography } from '../typography'
 
 import type { Theme } from './types'
 
+const iconSizes = {
+  xs: 14,
+  s: 16,
+  m: 20,
+  l: 24,
+  xl: 30,
+  '2xl': 32
+}
+
 const commonFoundations = {
   shadows,
   typography,

packages/mobile/.svgrrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+  template: require('../../svgr-template'),
+  dimensions: false,
+  replaceAttrValues: {
+    '#FF0000': '{props.fill}',
+    '#000': '{props.fill}',
+    '#f00': '{props.fillSecondary}'
+  }
+}

packages/mobile/package.json

@@ -90,7 +90,6 @@
     "@solana-mobile/mobile-wallet-adapter-protocol-web3js": "0.9.9",
     "@stripe/crypto": "0.0.4",
     "@stripe/stripe-js": "1.54.1",
-    "@svgr/core": "5.5.0",
     "@tanstack/react-query": "4.35.7",
     "@walletconnect/react-native-dapp": "1.8.0",
     "array.prototype.flat": "1.2.5",
@@ -152,7 +151,7 @@
     "react-native-screens": "3.17.0",
     "react-native-share": "8.0.0",
     "react-native-svg": "12.3.0",
-    "react-native-svg-transformer": "0.14.3",
+    "react-native-svg-transformer": "1.1.0",
     "react-native-tab-view": "3.1.1",
     "react-native-tiktok": "1.1.1",
     "react-native-track-player": "3.2.0",
@@ -193,10 +192,9 @@
     "@storybook/addon-actions": "6.5.16",
     "@storybook/addon-controls": "6.5.16",
     "@storybook/addon-ondevice-actions": "6.5.6",
-    "@storybook/addon-ondevice-controls": "6.5.6",
     "@storybook/addon-ondevice-backgrounds": "6.5.6",
+    "@storybook/addon-ondevice-controls": "6.5.6",
     "@storybook/react-native": "6.5.6",
-    "@svgr/plugin-svgo": "5.5.0",
     "@testing-library/jest-native": "5.4.3",
     "@testing-library/react-native": "12.3.0",
     "@tsconfig/react-native": "2.0.3",

packages/mobile/src/components/audio-rewards/IconAudioBadge.tsx

@@ -1,8 +1,8 @@
 import type { BadgeTier } from '@audius/common'
 import type { ImageStyle } from 'react-native'
 import { Image } from 'react-native'
-import type { SvgProps } from 'react-native-svg'
 
+import type { IconProps } from '@audius/harmony-native'
 import IconBronzeBadge from 'app/assets/images/IconBronzeBadge.svg'
 import IconGoldBadge from 'app/assets/images/IconGoldBadge.svg'
 import IconPlatinumBadge from 'app/assets/images/IconPlatinumBadge.svg'
@@ -17,7 +17,7 @@ const audioTierMap = {
   platinum: IconPlatinumBadge
 }
 
-type IconBadgeProps = SvgProps & {
+type IconBadgeProps = IconProps & {
   tier: BadgeTier
   showNoTier?: boolean
 }

packages/mobile/src/harmony-native/icons.ts

@@ -0,0 +1,8 @@
+import type { IconProps as HarmonyIconProps } from '@audius/harmony'
+import type { SvgProps } from 'react-native-svg'
+
+export * from '@audius/harmony/src/icons'
+
+export type IconProps = SvgProps & HarmonyIconProps & { fillSecondary?: string }
+
+export type Icon = React.FC<IconProps>

packages/mobile/src/harmony-native/index.ts

@@ -1,2 +1,3 @@
 export * from './foundations'
 export * from './components'
+export * from './icons'

packages/mobile/src/screens/feed-screen/FeedScreen.tsx

@@ -10,6 +10,7 @@ import {
 } from '@audius/common'
 import { useDispatch } from 'react-redux'
 
+// import { IconPlay } from '@audius/harmony-native'
 import IconFeed from 'app/assets/images/iconFeed.svg'
 import { Screen, ScreenContent, ScreenHeader } from 'app/components/core'
 import { FeedTipTile } from 'app/components/feed-tip-tile'
@@ -55,6 +56,7 @@ export const FeedScreen = () => {
         </OnlineOnly>
       </ScreenHeader>
       <ScreenContent>
+        {/* <IconPlay color={} /> */}
         <Lineup
           pullToRefresh
           delineate

packages/mobile/src/types/declarations.d.ts

@@ -1,16 +1,13 @@
 /// <reference types="@testing-library/jest-native" />
+
 /* eslint-disable import/order, import/no-duplicates */
 
 declare module 'fxa-common-password-list'
 declare module 'react-native-static-server'
 
 declare module '*.svg' {
-  import type { SvgProps } from 'react-native-svg'
-  const content: React.FC<
-    SvgProps & {
-      fillSecondary?: string
-    }
-  >
+  import type { Icon } from '@audius/harmony-native'
+  const content: Icon
   export default content
 }
 

packages/mobile/types/global.d.ts

@@ -1,14 +1,3 @@
-declare module '*.svg' {
-  import type * as React from 'react'
-
-  export const ReactComponent: React.FunctionComponent<
-    React.SVGProps<SVGSVGElement> & { title?: string }
-  >
-
-  const src: string
-  export default src
-}
-
 declare module 'antd/lib/popover'
 declare module 'classnames/types' {
   export type ClassValue = any

packages/web/src/pages/feed-page/components/desktop/FeedPageContent.tsx

@@ -5,6 +5,7 @@ import {
   FeatureFlags,
   useFeatureFlag
 } from '@audius/common'
+import { IconAlbum } from '@audius/harmony'
 
 import { make, useRecord } from 'common/store/analytics/actions'
 import Header from 'components/header/desktop/Header'
@@ -102,6 +103,7 @@ const FeedPageContent = ({
       size='large'
       header={header}
     >
+      <IconAlbum color='default' size='s' />
       <Lineup
         emptyElement={
           <EmptyFeed

svgr-template.js

@@ -0,0 +1,34 @@
+const template = (variables, { tpl }) => {
+  return tpl`
+${variables.imports};
+import {useTheme} from '@emotion/react'
+
+${variables.interfaces};
+
+const ${variables.componentName} = (${variables.props}) => {
+  const theme = useTheme()
+  const {
+    color,
+    size,
+    sizeH,
+    sizeW,
+    height: heightProp,
+    width: widthProp,
+    fill: fillProp,
+    ...other
+  } = props
+
+  const height = heightProp ?? theme.iconSizes[sizeH ?? size ?? 'l']
+  const width = widthProp ?? theme.iconSizes[sizeW ?? size ?? 'l']
+  const fill = fillProp ?? theme.color.icon[color] ?? 'red'
+
+  props = {...other, height, width, fill}
+
+  return (${variables.jsx})
+};
+
+${variables.exports};
+`
+}
+
+module.exports = template