feat: material symbol icon

.knip.jsonc

@@ -137,6 +137,10 @@
     "packages/zocial": {
       "ignore": ["src/NativeVectorIconsZocial.ts"],
       "ignoreDependencies": ["css-social-buttons"]
+    },
+    "packages/material-symbols": {
+      "ignore": ["src/NativeVectorIconsMaterialSymbols.ts"],
+      "ignoreDependencies": ["material-symbol-rnvi"]
     }
   }
 }

README.md

@@ -51,6 +51,7 @@ RNVI comes with the following supported icons. You can [search NPM](https://www.
 - [`MaterialDesignIcons`](https://pictogrammers.com/library/mdi/) from MaterialDesignIcons.com (v7.4.47 including _7448_ icons)
 - [`Octicons`](https://primer.style/foundations/icons) designed by GitHub, Inc. (v19.15.0 with _333_ icons)
 - [`Lucide`](https://lucide.dev/) designed by Lucide, (v0.473.0 with _1548_ icons)
+- [`MaterialSymbol`](https://github.com/google/material-design-icons/tree/master/symbols/web/) from MaterialDesignIcons (with _3660_ icons)
 
 ### No longer maintained upstream
 
@@ -94,7 +95,7 @@ Please refer to the guide for [Expo](./docs/SETUP-EXPO.md), [React Native](./doc
 You can either use one of the bundled icons above or roll your own custom font.
 
 ```js
-import Icon from '@react-native-vector-icons/fontawesome';
+import Icon from "@react-native-vector-icons/fontawesome";
 const myIcon = <Icon name="rocket" size={30} color="#900" />;
 ```
 
@@ -131,11 +132,15 @@ By combining some of these you can create for example :
 Some fonts today use multiple styles, FontAwesome 5 for example, which is supported by this library. The usage is pretty much the same as the standard `Icon` component:
 
 ```jsx
-import Icon from '@react-native-vector-icons/fontawesome5';
+import Icon from "@react-native-vector-icons/fontawesome5";
 
 const myIcon1 = <Icon name="comments" size={30} color="#900" />; // Defaults to solid
-const myIcon2 = <Icon name="comments" size={30} color="#900" iconType="solid" />;
-const myIcon3 = <Icon name="comments" size={30} color="#900" iconType="light" />; // Only in FA5 Pro
+const myIcon2 = (
+  <Icon name="comments" size={30} color="#900" iconType="solid" />
+);
+const myIcon3 = (
+  <Icon name="comments" size={30} color="#900" iconType="light" />
+); // Only in FA5 Pro
 ```
 
 ## Usage as PNG Image/Source Object
@@ -176,16 +181,16 @@ name and the value is either a UTF-8 character or it's character code.
 Font Book.app or similar to learn the name. Also pass the `fontFileName` argument for Android support.
 
 ```js
-import { createIconSet } from '@react-native-vector-icons/common';
-const glyphMap = { 'icon-name': 1234, test: '∆' };
+import { createIconSet } from "@react-native-vector-icons/common";
+const glyphMap = { "icon-name": 1234, test: "∆" };
 
 // use createIconSet() with object parameter
 // or use positional parameters for compatibility with version <= 10: `createIconSet(glyphMap, fontFamily[, fontFile])`
 const Icon = createIconSet(glyphMap, {
-   postScriptName: 'FontName',
-   fontFileName: 'font-name.ttf',
-   fontSource: require('../fonts/font-name.ttf') // optional, for dynamic loading. Can also be a local file uri.
-})
+  postScriptName: "FontName",
+  fontFileName: "font-name.ttf",
+  fontSource: require("../fonts/font-name.ttf"), // optional, for dynamic loading. Can also be a local file uri.
+});
 ```
 
 If you aren't using dynamic font loading you need to make sure your font is copied into your bundle.
@@ -227,7 +232,7 @@ Try the `IconExplorer` project in `Examples/IconExplorer` folder, there you can
 ### Basic Example
 
 ```js
-import Icon from '@react-native-vector-icons/ionicons';
+import Icon from "@react-native-vector-icons/ionicons";
 
 function ExampleView(props) {
   return <Icon name="ios-person" size={30} color="#4F8EF7" />;
@@ -237,8 +242,8 @@ function ExampleView(props) {
 ### Inline Icons
 
 ```js
-import { Text } from 'react-native';
-import Icon from '@react-native-vector-icons/ionicons';
+import { Text } from "react-native";
+import Icon from "@react-native-vector-icons/ionicons";
 
 function ExampleView(props) {
   return (
@@ -273,8 +278,8 @@ Create `__mocks__/@react-native-vector-icons/common.js`:
 ```js
 // Mock the entire common library so there are no native module loading errors
 module.exports = {
-  createIconSet: () => "icon"
-}
+  createIconSet: () => "icon",
+};
 ```
 
 ## [Changelog](https://github.com/react-native-vector-icons/react-native-vector-icons/releases)

packages/material-symbols/.yo-rc.json

@@ -0,0 +1,18 @@
+{
+  "generator-react-native-vector-icons": {
+    "packageName": "material-symbols",
+    "upstreamFont": "material-symbol-rnvi",
+    "buildSteps": {
+      "glyphmap": {
+        "location": "../../node_modules/material-symbol-rnvi/font/rounded/MaterialSymbols.css",
+        "mode": "css",
+        "prefix": ".MaterialSymbols-"
+      },
+      "copyFont": {
+        "location": "../../node_modules/material-symbol-rnvi/font/rounded/MaterialSymbols.ttf",
+        "cleanup": true
+      }
+    },
+    "versions": [{ "rnvi": "12.0.0", "upstream": "1.0.3" }]
+  }
+}

packages/material-symbols/README.md

@@ -0,0 +1,40 @@
+# React Native Vector Icons - Material Symbols
+
+Material Symbols font for React Native Vector Icons
+
+See the [React Native Vector Icons README](../../README.md) for more details.
+
+## Installation
+
+```sh
+npm install @react-native-vector-icons/material-symbols
+```
+
+## Usage
+
+```js
+import MaterialSymbols from '@react-native-vector-icons/material-symbols';
+
+// ...
+
+<MaterialSymbols name="house" color="#ff0000" size={20} />
+```
+
+
+## Versions
+
+Prior to version 12, the version of this font package tracked the upstream version.
+
+The table below tracks which font version is included in each package version.
+
+| RNVI version | Upstream version |
+| ------------ | ---------------- |
+| &lt;= 12.0.0 | 1.0.3 |
+
+## Contributing
+
+See the [contributing guide](../../CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
+
+## License
+
+MIT

packages/material-symbols/android/build.gradle

@@ -0,0 +1,60 @@
+// NOTE:This file was generated from packages/generator-react-native-vector-icons/src/app/templates
+// If you're contributing to react-native-vector-icons, make the change there, otherwise it'll be lost
+
+def isNewArchitectureEnabled() {
+  return rootProject.hasProperty("newArchEnabled") && rootProject.getProperty("newArchEnabled") == "true"
+}
+
+apply plugin: "com.android.library"
+apply plugin: "kotlin-android"
+
+if (isNewArchitectureEnabled()) {
+  apply plugin: "com.facebook.react"
+}
+
+def supportsNamespace() {
+  def parsed = com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION.tokenize('.')
+  def major = parsed[0].toInteger()
+  def minor = parsed[1].toInteger()
+
+  // Namespace support was added in 7.3.0
+  return (major == 7 && minor >= 3) || major >= 8
+}
+
+android {
+  if (supportsNamespace()) {
+    namespace "com.reactnativevectoricons.material_symbols"
+
+    sourceSets {
+      main {
+        manifest.srcFile "src/main/AndroidManifestNew.xml"
+      }
+    }
+  }
+
+  compileSdkVersion 31
+}
+
+dependencies {
+  implementation "com.facebook.react:react-native:+"
+}
+
+if (isNewArchitectureEnabled()) {
+  react {
+    jsRootDir = file("../src/")
+    libraryName = "VectorIconsMaterialSymbols"
+    codegenJavaPackageName = "com.reactnativevectoricons.material_symbols"
+  }
+}
+
+android.sourceSets.main.assets.srcDirs += file("$buildDir/intermediates/RNVI-material-symbols")
+
+task copyFonts(type: Copy) {
+  from "../fonts"
+  include "*.ttf"
+
+  into "${buildDir}/intermediates/RNVI-material-symbols/fonts"
+  eachFile { println "(RNVI:material-symbols) Copying font ${it.file}" }
+}
+
+preBuild.dependsOn(copyFonts)

packages/material-symbols/android/src/main/AndroidManifest.xml

@@ -0,0 +1,3 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+  package="com.reactnativevectoricons.material_symbols">
+</manifest>

packages/material-symbols/android/src/main/AndroidManifestNew.xml

@@ -0,0 +1,2 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+</manifest>

packages/material-symbols/android/src/main/java/VectorIconsMaterialSymbolsPackage.kt

@@ -0,0 +1,18 @@
+package com.reactnativevectoricons.material_symbols
+
+import com.facebook.react.TurboReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.model.ReactModuleInfoProvider
+
+class VectorIconsMaterialSymbolsPackage : TurboReactPackage() {
+    override fun getModule(
+        name: String,
+        reactContext: ReactApplicationContext,
+    ): NativeModule? = null
+
+    override fun getReactModuleInfoProvider(): ReactModuleInfoProvider =
+        ReactModuleInfoProvider {
+            mapOf()
+        }
+}

packages/material-symbols/babel.config.js

@@ -0,0 +1,6 @@
+// NOTE:This file was generated from packages/generator-react-native-vector-icons/src/app/templates
+// If you're contributing to react-native-vector-icons, make the change there, otherwise it'll be lost
+
+module.exports = {
+  presets: [['module:react-native-builder-bob/babel-preset', { modules: 'commonjs' }]],
+};