chore: update to design icons

Author: lukewalczak

.github/workflows/versions.yml

@@ -14,7 +14,8 @@ jobs:
           required-packages: |
             react-native
             react-native-paper
-            react-native-vector-icons
+            @react-native-vector-icons/common
+            @react-native-vector-icons/material-design-icons
           optional-packages: |
             expo
             npm

docs/package.json

@@ -23,6 +23,8 @@
     "@easyops-cn/docusaurus-search-local": "^0.33.4",
     "@material/material-color-utilities": "0.2.4",
     "@mdx-js/react": "^1.6.22",
+    "@react-native-vector-icons/common": "^11.0.0",
+    "@react-native-vector-icons/material-design-icons": "^7.4.47",
     "camelcase": "^7.0.1",
     "clsx": "^1.2.1",
     "color": "^4.2.3",
@@ -32,7 +34,6 @@
     "react-color": "^2.19.3",
     "react-dom": "17.0.2",
     "react-native-safe-area-context": "^4.5.0",
-    "react-native-vector-icons": "^9.2.0",
     "react-native-web": "^0.18.12",
     "use-latest-callback": "^0.1.7"
   },

docs/src/components/IconsList.tsx

@@ -1,10 +1,7 @@
 import React, { useState } from 'react';
 
-// @ts-ignore
-import MaterialCommunityIcons from 'react-native-vector-icons/glyphmaps/MaterialCommunityIcons.json';
-
 const icons: { [key in string]: number } = {
-  ...MaterialCommunityIcons,
+  ...require('../../node_modules/@react-native-vector-icons/material-design-icons/glyphmaps/MaterialDesignIcons.json'),
 };
 
 export default function IconsList() {

docs/src/css/custom.css

@@ -137,7 +137,7 @@ html[data-theme='light'] .gallery-dark {
 .icons-list-icon {
   display: block;
   margin: 16px;
-  font-family: 'MaterialCommunityIcons';
+  font-family: 'MaterialDesignIcons';
   font-size: 48px;
   color: var(--theme-text-color);
 }
@@ -183,8 +183,8 @@ html[data-theme='light'] .gallery-dark {
 }
 
 @font-face {
-  font-family: 'MaterialCommunityIcons';
-  src: url('../../node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf') format('truetype');
+  font-family: 'MaterialDesignIcons';
+  src: url('../../node_modules/@react-native-vector-icons/material-design-icons/fonts/MaterialDesignIcons.ttf') format('truetype');
 }
 
 .badge:is(a .badge) {

docs/yarn.lock

@@ -3417,6 +3417,53 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-native-community/cli-tools@npm:^15.1.2":
+  version: 15.1.3
+  resolution: "@react-native-community/cli-tools@npm:15.1.3"
+  dependencies:
+    appdirsjs: "npm:^1.2.4"
+    chalk: "npm:^4.1.2"
+    execa: "npm:^5.0.0"
+    find-up: "npm:^5.0.0"
+    mime: "npm:^2.4.1"
+    open: "npm:^6.2.0"
+    ora: "npm:^5.4.1"
+    prompts: "npm:^2.4.2"
+    semver: "npm:^7.5.2"
+    shell-quote: "npm:^1.7.3"
+    sudo-prompt: "npm:^9.0.0"
+  checksum: 10c0/e458f3a5e97456b6fa8741cd8c04ca384b7657df9f53111daaf132911b00b6b5bf08fad2206c8461d0974b71548296b9da669af76dddf7f3261ac5d527df6bcc
+  languageName: node
+  linkType: hard
+
+"@react-native-vector-icons/common@npm:^11.0.0":
+  version: 11.0.0
+  resolution: "@react-native-vector-icons/common@npm:11.0.0"
+  dependencies:
+    "@react-native-community/cli-tools": "npm:^15.1.2"
+    picocolors: "npm:^1.1.1"
+    plist: "npm:^3.1.0"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  bin:
+    rnvi-update-plist: lib/commonjs/scripts/updatePlist.js
+  checksum: 10c0/4463ee8abfaa3560afe7ff8d395217590ab484295831bf16e32615c3741a8c6a017f73b3162d819c3181a4d7007e57915be0328256943c8388b128055f1dd8c7
+  languageName: node
+  linkType: hard
+
+"@react-native-vector-icons/material-design-icons@npm:^7.4.47":
+  version: 7.4.47
+  resolution: "@react-native-vector-icons/material-design-icons@npm:7.4.47"
+  dependencies:
+    "@react-native-vector-icons/common": "npm:^11.0.0"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 10c0/8c86c0310eb3ee7d7ea620edb0d346f1ab9b5a502f4c378447d57aa9656744b3944663cedb581cd7f9fa99d2dd26e50dbe8862662a368fc46de4b5413189453c
+  languageName: node
+  linkType: hard
+
 "@sideway/address@npm:^4.1.3":
   version: 4.1.4
   resolution: "@sideway/address@npm:4.1.4"
@@ -4166,6 +4213,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@xmldom/xmldom@npm:^0.8.8":
+  version: 0.8.10
+  resolution: "@xmldom/xmldom@npm:0.8.10"
+  checksum: 10c0/c7647c442502720182b0d65b17d45d2d95317c1c8c497626fe524bda79b4fb768a9aa4fae2da919f308e7abcff7d67c058b102a9d641097e9a57f0b80187851f
+  languageName: node
+  linkType: hard
+
 "@xtuc/ieee754@npm:^1.2.0":
   version: 1.2.0
   resolution: "@xtuc/ieee754@npm:1.2.0"
@@ -4430,6 +4484,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"appdirsjs@npm:^1.2.4":
+  version: 1.2.7
+  resolution: "appdirsjs@npm:1.2.7"
+  checksum: 10c0/79dd8d7a764cdde2b47efc4383e054814be917ba0cd661ee324bdf3fd11542834548316faea31344f96a7ebc898b5f89c11d1418f825a1d40c396bf1ecb0902b
+  languageName: node
+  linkType: hard
+
 "arg@npm:^5.0.0":
   version: 5.0.2
   resolution: "arg@npm:5.0.2"
@@ -4689,7 +4750,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"base64-js@npm:^1.3.1":
+"base64-js@npm:^1.3.1, base64-js@npm:^1.5.1":
   version: 1.5.1
   resolution: "base64-js@npm:1.5.1"
   checksum: 10c0/f23823513b63173a001030fae4f2dabe283b99a9d324ade3ad3d148e218134676f1ee8568c877cd79ec1c53158dcf2d2ba527a97c606618928ba99dd930102bf
@@ -6419,6 +6480,8 @@ __metadata:
     "@easyops-cn/docusaurus-search-local": "npm:^0.33.4"
     "@material/material-color-utilities": "npm:0.2.4"
     "@mdx-js/react": "npm:^1.6.22"
+    "@react-native-vector-icons/common": "npm:^11.0.0"
+    "@react-native-vector-icons/material-design-icons": "npm:^7.4.47"
     "@tsconfig/docusaurus": "npm:^1.0.6"
     "@types/marked": "npm:^4.0.7"
     "@types/react-color": "npm:^3.0.6"
@@ -6433,7 +6496,6 @@ __metadata:
     react-color: "npm:^2.19.3"
     react-dom: "npm:17.0.2"
     react-native-safe-area-context: "npm:^4.5.0"
-    react-native-vector-icons: "npm:^9.2.0"
     react-native-web: "npm:^0.18.12"
     typescript: "npm:^4.8.4"
     use-latest-callback: "npm:^0.1.7"
@@ -9894,6 +9956,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mime@npm:^2.4.1":
+  version: 2.6.0
+  resolution: "mime@npm:2.6.0"
+  bin:
+    mime: cli.js
+  checksum: 10c0/a7f2589900d9c16e3bdf7672d16a6274df903da958c1643c9c45771f0478f3846dcb1097f31eb9178452570271361e2149310931ec705c037210fc69639c8e6c
+  languageName: node
+  linkType: hard
+
 "mimic-fn@npm:^2.1.0":
   version: 2.1.0
   resolution: "mimic-fn@npm:2.1.0"
@@ -10520,6 +10591,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"open@npm:^6.2.0":
+  version: 6.4.0
+  resolution: "open@npm:6.4.0"
+  dependencies:
+    is-wsl: "npm:^1.1.0"
+  checksum: 10c0/447115632b4f3939fa0d973c33e17f28538fd268fd8257fc49763f7de6e76d29d65585b15998bbd2137337cfb70a92084a0e1b183a466e53a4829f704f295823
+  languageName: node
+  linkType: hard
+
 "open@npm:^7.4.2":
   version: 7.4.2
   resolution: "open@npm:7.4.2"
@@ -10559,7 +10639,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ora@npm:^5.1.0":
+"ora@npm:^5.1.0, ora@npm:^5.4.1":
   version: 5.4.1
   resolution: "ora@npm:5.4.1"
   dependencies:
@@ -10989,7 +11069,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"picocolors@npm:^1.1.0":
+"picocolors@npm:^1.1.0, picocolors@npm:^1.1.1":
   version: 1.1.1
   resolution: "picocolors@npm:1.1.1"
   checksum: 10c0/e2e3e8170ab9d7c7421969adaa7e1b31434f789afb9b3f115f6b96d91945041ac3ceb02e9ec6fe6510ff036bcc0bf91e69a1772edc0b707e12b19c0f2d6bcf58
@@ -11044,6 +11124,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"plist@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "plist@npm:3.1.0"
+  dependencies:
+    "@xmldom/xmldom": "npm:^0.8.8"
+    base64-js: "npm:^1.5.1"
+    xmlbuilder: "npm:^15.1.1"
+  checksum: 10c0/db19ba50faafc4103df8e79bcd6b08004a56db2a9dd30b3e5c8b0ef30398ef44344a674e594d012c8fc39e539a2b72cb58c60a76b4b4401cbbc7c8f6b028d93d
+  languageName: node
+  linkType: hard
+
 "posix-character-classes@npm:^0.1.0":
   version: 0.1.1
   resolution: "posix-character-classes@npm:0.1.1"
@@ -11953,19 +12044,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-vector-icons@npm:^9.2.0":
-  version: 9.2.0
-  resolution: "react-native-vector-icons@npm:9.2.0"
-  dependencies:
-    prop-types: "npm:^15.7.2"
-    yargs: "npm:^16.1.1"
-  bin:
-    fa5-upgrade: bin/fa5-upgrade.sh
-    generate-icon: bin/generate-icon.js
-  checksum: 10c0/6a6c415195cfde49f3148e8568ffecb4b272e0ff6fe808fd2fd956834f3bdb2dbeac513b06be20497cce376a832909dfcba72431dc25e4aea076700cc34d8757
-  languageName: node
-  linkType: hard
-
 "react-native-web@npm:^0.18.12":
   version: 0.18.12
   resolution: "react-native-web@npm:0.18.12"
@@ -12848,6 +12926,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"semver@npm:^7.5.2":
+  version: 7.7.1
+  resolution: "semver@npm:7.7.1"
+  bin:
+    semver: bin/semver.js
+  checksum: 10c0/fd603a6fb9c399c6054015433051bdbe7b99a940a8fb44b85c2b524c4004b023d7928d47cb22154f8d054ea7ee8597f586605e05b52047f048278e4ac56ae958
+  languageName: node
+  linkType: hard
+
 "semver@npm:^7.5.3":
   version: 7.6.3
   resolution: "semver@npm:7.6.3"
@@ -13622,6 +13709,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sudo-prompt@npm:^9.0.0":
+  version: 9.2.1
+  resolution: "sudo-prompt@npm:9.2.1"
+  checksum: 10c0/e56793513a9c95f66367a3be2ec4c1adee84a2a62f1b7ff6453d610586dcd373d7d8f4df522a7dae03aea8b779ef7f7ba25d1130d24fb1e495cfbbc2c72c7486
+  languageName: node
+  linkType: hard
+
 "supports-color@npm:^5.3.0":
   version: 5.5.0
   resolution: "supports-color@npm:5.5.0"
@@ -15076,6 +15170,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"xmlbuilder@npm:^15.1.1":
+  version: 15.1.1
+  resolution: "xmlbuilder@npm:15.1.1"
+  checksum: 10c0/665266a8916498ff8d82b3d46d3993913477a254b98149ff7cff060d9b7cc0db7cf5a3dae99aed92355254a808c0e2e3ec74ad1b04aa1061bdb8dfbea26c18b8
+  languageName: node
+  linkType: hard
+
 "xtend@npm:^4.0.0, xtend@npm:^4.0.1":
   version: 4.0.2
   resolution: "xtend@npm:4.0.2"
@@ -15153,7 +15254,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yargs@npm:^16.1.0, yargs@npm:^16.1.1, yargs@npm:^16.2.0":
+"yargs@npm:^16.1.0, yargs@npm:^16.2.0":
   version: 16.2.0
   resolution: "yargs@npm:16.2.0"
   dependencies:

example/babel.config.js

@@ -20,8 +20,8 @@ module.exports = function (api) {
             ),
             // For development, we want to alias the library to the source
             [pak.name]: path.join(__dirname, '..', 'src'),
-            '@react-native-vector-icons/material-icons':
-              '@expo/vector-icons/MaterialIcons', //Fixes issue with icons not showing up on web (I also had to add @expo/vector-icons to react-native-paper devDependencies)
+            '@react-native-vector-icons/material-design-icons':
+              '@expo/vector-icons/MaterialCommunityIcons', //Fixes issue with icons not showing up on web (I also had to add @expo/vector-icons to react-native-paper devDependencies)
           },
         },
       ],

example/package.json

@@ -45,7 +45,7 @@
   "devDependencies": {
     "@babel/core": "^7.25.2",
     "@react-native-vector-icons/common": "^11.0.0",
-    "@react-native-vector-icons/material-icons": "^0.0.1",
+    "@react-native-vector-icons/material-design-icons": "^7.4.47",
     "babel-plugin-module-resolver": "^5.0.0",
     "babel-preset-expo": "~12.0.0",
     "url-loader": "^4.1.1"

example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
 import { Animated, FlatList, Platform, StyleSheet, View } from 'react-native';
 
-import Icon from '@react-native-vector-icons/material-icons';
+import Icon from '@react-native-vector-icons/material-design-icons';
 import {
   Avatar,
   MD2Colors,

example/src/Examples/BottomNavigationBarExample.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
 
-import Icon from '@react-native-vector-icons/material-icons';
+import Icon from '@react-native-vector-icons/material-design-icons';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { CommonActions } from '@react-navigation/native';
 import { Text, BottomNavigation } from 'react-native-paper';
@@ -75,7 +75,7 @@ export default function BottomNavigationBarExample() {
         component={SettingsScreen}
         options={{
           tabBarIcon: ({ color, size }) => {
-            return <Icon name="settings" size={size} color={color} />;
+            return <Icon name="cog" size={size} color={color} />;
           },
         }}
       />

example/src/Examples/MaterialBottomTabNavigatorExample.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import Icon from '@react-native-vector-icons/material-icons';
+import Icon from '@react-native-vector-icons/material-design-icons';
 
 import { createMaterialBottomTabNavigator } from '../../../src/react-navigation';