fix: replace icon pack with working one

apps/common-app/package.json

@@ -3,11 +3,12 @@
   "version": "0.0.1",
   "private": true,
   "peerDependencies": {
+    "@react-native-vector-icons/common": "*",
+    "@react-native-vector-icons/icomoon": "*",
     "@react-navigation/native": "*",
     "@react-navigation/native-stack": "*",
     "@react-navigation/stack": "*",
     "@shopify/react-native-skia": "*",
-    "@swmansion/icons": "*",
     "react": "*",
     "react-dom": "*",
     "react-native": "*",
@@ -19,11 +20,12 @@
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
+    "@react-native-vector-icons/common": "^11.0.0",
+    "@react-native-vector-icons/icomoon": "^0.0.1",
     "@react-navigation/native": "^6.1.18",
     "@react-navigation/native-stack": "^6.11.0",
     "@react-navigation/stack": "^6.4.1",
     "@shopify/react-native-skia": "^1.5.1",
-    "@swmansion/icons": "0.0.1",
     "react": "18.3.1",
     "react-dom": "18.2.0",
     "react-native": "0.76.0",

apps/common-app/src/components/Icon.tsx

@@ -0,0 +1,6 @@
+import createIconSet from '@react-native-vector-icons/icomoon';
+import icoMoonConfig from './icomoonConfig.json';
+
+const Icon = createIconSet(icoMoonConfig, 'icomoon');
+
+export default Icon;

apps/common-app/src/components/Select.tsx

@@ -1,12 +1,11 @@
 import { useState } from 'react';
-// @ts-expect-error
-import { Icon } from '@swmansion/icons';
 import { ScrollView } from 'react-native-gesture-handler';
 import { Modal, View, Text, Pressable, StyleSheet } from 'react-native';
 
 import withSeparators from '../utils/withSeparators';
 import { colors } from '../styles';
 import Spacer from './Spacer';
+import Icon from './Icon';
 
 interface SelectProps<T extends string> {
   value: T;
@@ -47,12 +46,7 @@ function Select<T extends string>(props: SelectProps<T>) {
       <Pressable onPress={() => setModalOpen(true)}>
         <View style={styles.selectBox}>
           <Text style={styles.selectText}>{value}</Text>
-          <Icon
-            size={34}
-            type="broken"
-            name="list-pointers"
-            color={colors.white}
-          />
+          <Icon size={24} name="menu-hamburger" color={colors.white} />
         </View>
       </Pressable>
       <Modal visible={isModalOpen} animationType="fade" transparent>

apps/common-app/src/components/icomoonConfig.json

@@ -0,0 +1 @@
+{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M512 85.333c-235.136 0-426.667 191.531-426.667 426.667 0 235.137 191.531 426.667 426.667 426.667 235.137 0 426.667-191.53 426.667-426.667 0-235.136-191.529-426.667-426.667-426.667zM512 170.667c189.020 0 341.333 152.315 341.333 341.333 0 189.020-152.313 341.333-341.333 341.333-189.018 0-341.333-152.313-341.333-341.333 0-189.018 152.315-341.333 341.333-341.333zM725.333 341.333c-11.781 0.002-22.447 4.778-30.167 12.5l-268.5 268.5-97.833-97.833c-7.721-7.719-18.386-12.494-30.167-12.494s-22.446 4.774-30.167 12.494l0-0c-7.719 7.721-12.494 18.386-12.494 30.167s4.774 22.446 12.494 30.167l128 128c7.721 7.718 18.387 12.492 30.167 12.492s22.445-4.774 30.167-12.492l298.666-298.666c7.719-7.721 12.494-18.386 12.494-30.167s-4.774-22.446-12.494-30.167l0 0c-7.72-7.722-18.385-12.498-30.166-12.5l-0-0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["check-circle"]},"attrs":[{}],"properties":{"order":21,"id":8,"name":"check-circle","prevSize":32,"code":59655},"setIdx":0,"setId":2,"iconIdx":0},{"icon":{"paths":["M512 85.333c-235.136 0-426.667 191.531-426.667 426.667 0 235.137 191.531 426.667 426.667 426.667 235.137 0 426.667-191.53 426.667-426.667 0-235.136-191.529-426.667-426.667-426.667zM512 170.667c189.020 0 341.333 152.315 341.333 341.333 0 189.020-152.313 341.333-341.333 341.333-189.018 0-341.333-152.313-341.333-341.333 0-189.018 152.315-341.333 341.333-341.333z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["circle"]},"attrs":[{}],"properties":{"order":20,"id":7,"name":"circle","prevSize":32,"code":59656},"setIdx":0,"setId":2,"iconIdx":1},{"icon":{"paths":["M640 128c-11.781 0.002-22.447 4.778-30.167 12.5l-341.333 341.333c-7.718 7.721-12.492 18.387-12.492 30.167s4.774 22.445 12.492 30.167l341.333 341.333c7.721 7.719 18.386 12.494 30.167 12.494s22.446-4.774 30.167-12.494l-0 0c7.719-7.721 12.494-18.386 12.494-30.167s-4.774-22.446-12.494-30.167l-311.167-311.167 311.167-311.167c7.719-7.721 12.494-18.386 12.494-30.167s-4.774-22.446-12.494-30.167l0 0c-7.72-7.722-18.385-12.498-30.166-12.5l-0-0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["chevron-left"]},"attrs":[{}],"properties":{"order":12,"id":6,"name":"chevron-left","prevSize":32,"code":59648},"setIdx":0,"setId":2,"iconIdx":2},{"icon":{"paths":["M183.167 183.167c-7.719 7.721-12.494 18.386-12.494 30.167s4.774 22.446 12.494 30.167l268.5 268.5-268.5 268.5c-7.719 7.721-12.494 18.386-12.494 30.167s4.774 22.446 12.494 30.167l-0-0c7.721 7.719 18.386 12.494 30.167 12.494s22.446-4.774 30.167-12.494l268.5-268.5 268.5 268.5c7.721 7.719 18.386 12.494 30.167 12.494s22.446-4.774 30.167-12.494l-0 0c7.719-7.721 12.494-18.386 12.494-30.167s-4.774-22.446-12.494-30.167l-268.5-268.5 268.5-268.5c7.719-7.721 12.494-18.386 12.494-30.167s-4.774-22.446-12.494-30.167l0 0c-7.721-7.719-18.386-12.494-30.167-12.494s-22.446 4.774-30.167 12.494l-268.5 268.5-268.5-268.5c-7.721-7.719-18.386-12.494-30.167-12.494s-22.446 4.774-30.167 12.494l0-0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["cross"]},"attrs":[{}],"properties":{"order":13,"id":5,"name":"cross","prevSize":32,"code":59649},"setIdx":0,"setId":2,"iconIdx":3},{"icon":{"paths":["M170.667 213.333c-23.564 0-42.667 19.103-42.667 42.667v0c0 23.564 19.103 42.667 42.667 42.667v0h682.667c23.564 0 42.667-19.103 42.667-42.667v0c0-23.564-19.103-42.667-42.667-42.667v0zM170.667 469.333c-23.564 0-42.667 19.103-42.667 42.667v0c0 23.564 19.103 42.667 42.667 42.667v0h682.667c23.564 0 42.667-19.103 42.667-42.667v0c0-23.564-19.103-42.667-42.667-42.667v0zM170.667 725.333c-23.564 0-42.667 19.103-42.667 42.667v0c0 23.564 19.103 42.667 42.667 42.667v0h682.667c23.564 0 42.667-19.103 42.667-42.667v0c0-23.564-19.103-42.667-42.667-42.667v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["menu-hamburger"]},"attrs":[{}],"properties":{"order":15,"id":4,"name":"menu-hamburger","prevSize":32,"code":59650},"setIdx":0,"setId":2,"iconIdx":4},{"icon":{"paths":["M842.083 86.833l-469.333 128c-18.253 5.11-31.417 21.598-31.417 41.16 0 0.002 0 0.005 0 0.007l-0-0v357.25c-19.607-9.528-40.888-15.917-64-15.917-81.969 0-149.333 67.365-149.333 149.333s67.364 149.333 149.333 149.333c81.969 0 149.333-67.365 149.333-149.333v-458.083l384-104.75v386.75c-19.607-9.528-40.888-15.917-64-15.917-81.969 0-149.333 67.364-149.333 149.333s67.364 149.333 149.333 149.333c81.969 0 149.333-67.364 149.333-149.333v-576c0-0.001 0-0.003 0-0.004 0-23.567-19.104-42.671-42.671-42.671-4.001 0-7.874 0.551-11.546 1.58l0.3-0.072zM746.667 640c35.851 0 64 28.149 64 64s-28.149 64-64 64c-35.851 0-64-28.149-64-64s28.149-64 64-64zM277.333 682.667c35.851 0 64 28.149 64 64s-28.149 64-64 64c-35.851 0-64-28.149-64-64s28.149-64 64-64z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["music"]},"attrs":[{}],"properties":{"order":16,"id":3,"name":"music","prevSize":32,"code":59651},"setIdx":0,"setId":2,"iconIdx":5},{"icon":{"paths":["M213.333 128c-23.563 0.002-42.664 19.103-42.667 42.666l-0 0v682.667c0.002 23.563 19.103 42.664 42.666 42.667l213.334 0c23.563-0.002 42.664-19.103 42.667-42.666l0-0v-682.667c-0.002-23.563-19.103-42.664-42.666-42.667l-0-0zM256 213.333h128v597.333h-128z","M597.333 128c-23.563 0.002-42.664 19.103-42.667 42.666l-0 0v682.667c0.002 23.563 19.103 42.664 42.666 42.667l213.334 0c23.563-0.002 42.664-19.103 42.667-42.666l0-0v-682.667c-0.002-23.563-19.103-42.664-42.666-42.667l-0-0zM640 213.333h128v597.333h-128z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["pause"]},"attrs":[{},{}],"properties":{"order":17,"id":2,"name":"pause","prevSize":32,"code":59652},"setIdx":0,"setId":2,"iconIdx":6},{"icon":{"paths":["M234.25 90.833c-6.018-3.445-13.228-5.476-20.912-5.476-23.557 0-42.655 19.088-42.671 42.641l-0 0.002v768c0.016 23.554 19.114 42.642 42.671 42.642 7.684 0 14.894-2.031 21.122-5.586l-0.21 0.11 682.667-384c13.053-7.464 21.708-21.305 21.708-37.167s-8.655-29.702-21.499-37.057l-0.209-0.11zM256 200.917l553 311.083-553 311.083z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["play"]},"attrs":[{}],"properties":{"order":18,"id":1,"name":"play","prevSize":32,"code":59653},"setIdx":0,"setId":2,"iconIdx":7},{"icon":{"paths":["M640 128c-23.564 0-42.667 19.103-42.667 42.667v0 682.667c0 23.564 19.103 42.667 42.667 42.667v0c23.564 0 42.667-19.103 42.667-42.667v0-682.667c0-23.564-19.103-42.667-42.667-42.667v0zM512 256c-23.564 0-42.667 19.103-42.667 42.667v0 426.667c0 23.564 19.103 42.667 42.667 42.667v0c23.564 0 42.667-19.103 42.667-42.667v0-426.667c0-23.564-19.103-42.667-42.667-42.667v0zM256 298.667c-23.564 0-42.667 19.103-42.667 42.667v0 341.333c0 23.564 19.103 42.667 42.667 42.667v0c23.564 0 42.667-19.103 42.667-42.667v0-341.333c0-23.564-19.103-42.667-42.667-42.667v0zM768 341.333c-23.564 0-42.667 19.103-42.667 42.667v0 256c0 23.564 19.103 42.667 42.667 42.667v0c23.564 0 42.667-19.103 42.667-42.667v0-256c0-23.564-19.103-42.667-42.667-42.667v0zM384 384c-23.564 0-42.667 19.103-42.667 42.667v0 170.667c0 23.564 19.103 42.667 42.667 42.667v0c23.564 0 42.667-19.103 42.667-42.667v0-170.667c0-23.564-19.103-42.667-42.667-42.667v0zM128 426.667c-23.564 0-42.667 19.103-42.667 42.667v0 85.333c0 23.564 19.103 42.667 42.667 42.667v0c23.564 0 42.667-19.103 42.667-42.667v0-85.333c0-23.564-19.103-42.667-42.667-42.667v0zM896 426.667c-23.564 0-42.667 19.103-42.667 42.667v0 85.333c0 23.564 19.103 42.667 42.667 42.667v0c23.564 0 42.667-19.103 42.667-42.667v0-85.333c0-23.564-19.103-42.667-42.667-42.667v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["sound-2"]},"attrs":[{}],"properties":{"order":14,"id":0,"name":"sound-2","prevSize":32,"code":59654},"setIdx":0,"setId":2,"iconIdx":8}],"height":1024,"metadata":{"name":"icomoon"},"preferences":{"showGlyphs":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"icon-","metadata":{"fontFamily":"icomoon"},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"classSelector":".icon"},"historySize":50,"showCodes":true,"gridSize":16}}

apps/common-app/src/components/index.ts

@@ -1,3 +1,4 @@
+export { default as Icon } from './Icon';
 export { default as Step } from './Step';
 export { default as Steps } from './Steps';
 export { default as Button } from './Button';

apps/common-app/src/examples/DrumMachine/PlayButton.tsx

@@ -4,10 +4,9 @@ import Animated, {
   useAnimatedStyle,
 } from 'react-native-reanimated';
 import React, { memo } from 'react';
-// @ts-expect-error
-import { Icon } from '@swmansion/icons';
 import { Pressable, StyleSheet } from 'react-native';
 
+import { Icon } from '../../components';
 import { colors } from '../../styles';
 import type { PlayingInstruments, XYWHRect } from './types';
 import { size } from './constants';
@@ -48,8 +47,7 @@ const PlayButtonInner: React.FC<PlayButtonInnerProps> = (props) => {
   return (
     <Animated.View style={[styles.playButtonInner, containerStyle]}>
       <Icon
-        size={48}
-        type="broken"
+        size={40}
         color={colors.white}
         name={isPlaying ? 'pause' : 'play'}
       />

apps/fabric-example/ios/FabricExample/Info.plist

@@ -26,14 +26,13 @@
 	<true/>
 	<key>NSAppTransportSecurity</key>
 	<dict>
-	  <!-- Do not change NSAllowsArbitraryLoads to true, or you will risk app rejection! -->
 		<key>NSAllowsArbitraryLoads</key>
 		<false/>
 		<key>NSAllowsLocalNetworking</key>
 		<true/>
 	</dict>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
+	<string/>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
@@ -48,5 +47,9 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
+	<key>UIAppFonts</key>
+	<array>
+		<string>icomoon.ttf</string>
+	</array>
 </dict>
-</plist>
+</plist>

apps/fabric-example/ios/Podfile.lock

@@ -1331,6 +1331,27 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
+  - react-native-vector-icons (11.0.0):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - React-nativeconfig (0.76.0)
   - React-NativeModulesApple (0.76.0):
     - glog
@@ -1815,6 +1836,7 @@ DEPENDENCIES:
   - React-microtasksnativemodule (from `../node_modules/react-native/ReactCommon/react/nativemodule/microtasks`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - "react-native-skia (from `../node_modules/@shopify/react-native-skia`)"
+  - "react-native-vector-icons (from `../node_modules/@react-native-vector-icons/common`)"
   - React-nativeconfig (from `../node_modules/react-native/ReactCommon`)
   - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
@@ -1928,6 +1950,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-safe-area-context"
   react-native-skia:
     :path: "../node_modules/@shopify/react-native-skia"
+  react-native-vector-icons:
+    :path: "../node_modules/@react-native-vector-icons/common"
   React-nativeconfig:
     :path: "../node_modules/react-native/ReactCommon"
   React-NativeModulesApple:
@@ -2031,6 +2055,7 @@ SPEC CHECKSUMS:
   React-microtasksnativemodule: 0b7db04c18f6bb01ef5b1f9007c3229abecc35dd
   react-native-safe-area-context: 2500e4fe998caad50ad3bc51ec23ef951308569e
   react-native-skia: b5216ffad62ec47294094cb25630332bb8f96493
+  react-native-vector-icons: 1c0923f822a6d103e0f3583b533c930803f21f4b
   React-nativeconfig: 72c10ff34863148ef90df9c9c8eacba99d2faaaa
   React-NativeModulesApple: 5ec49182fa000b2215ee1bed03e2867f8323ccf5
   React-perflogger: 073c7a8a436b3fe724f1df34e9d1f3db1d25fe74

apps/fabric-example/package.json

@@ -10,11 +10,12 @@
     "test": "jest"
   },
   "dependencies": {
+    "@react-native-vector-icons/common": "^11.0.0",
+    "@react-native-vector-icons/icomoon": "^0.0.1",
     "@react-navigation/native": "^6.1.18",
     "@react-navigation/native-stack": "^6.11.0",
     "@react-navigation/stack": "^6.4.1",
     "@shopify/react-native-skia": "^1.5.1",
-    "@swmansion/icons": "^0.0.1",
     "common-app": "workspace:*",
     "react": "18.3.1",
     "react-dom": "18.2.0",
@@ -51,5 +52,8 @@
   },
   "installConfig": {
     "hoistingLimits": "dependencies"
+  },
+  "reactNativeVectorIcons": {
+    "fontDir": "./assets/fonts"
   }
 }

apps/fabric-example/react-native.config.js

@@ -2,5 +2,5 @@ const path = require('path');
 
 module.exports = {
   project: {},
-  assets: [path.join(__dirname, 'node_modules', '@swmansion/icons', 'fonts')],
+  assets: [path.join(__dirname, 'node_modules', 'assets/fonts')],
 };