feat: add universal support and package rename

[oktaysenkan]

Hello 👋

react-native-iconify has been renamed to Monicon.

Monicon is an easy-to-use icon library that makes adding icons to your projects simple. It works with popular frameworks like React, React Native, Next.js, Vue, Nuxt, Svelte and more.

---

Migration guide

Uninstall react-native-iconify

npm uninstall react-native-iconify

Install Monicon

To get started, you’ll need to install the necessary dependencies for Monicon. In your project directory, run the following command to install the dependencies.

npm i @monicon/native @monicon/metro @monicon/babel-plugin
 
# if you want react-native-web support
npm i @monicon/webpack

Now you should install the development dependency @iconify/json for the icon sets. This package provides a comprehensive collection of icons that can be easily integrated into your project.

npm i -D @iconify/json

Configure Metro

Now that the dependencies are installed, you’ll need to configure Metro to use Monicon.

const { getDefaultConfig } = require("expo/metro-config");
const { withMonicon } = require("@monicon/metro");
 
const config = getDefaultConfig(__dirname);
 
const configWithMonicon = withMonicon(config, {
  icons: [
    "mdi:home",
    "feather:activity",
    "logos:active-campaign",
  ],
});
 
module.exports = configWithMonicon;

Configure Babel

Now you’ll need to configure Babel.

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [["@monicon/babel-plugin"]],
  };
};

Configure Webpack (Optional)

If you want to use Monicon with React Native Web, you’ll need to configure Webpack.

const createExpoWebpackConfigAsync = require("@expo/webpack-config");
const { MoniconPlugin } = require("@monicon/webpack");
 
module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
 
  config.plugins.push(
    new MoniconPlugin({
      icons: [
        "mdi:home",
        "feather:activity",
        "logos:active-campaign",
      ],
    })
  );
 
  return config;
};