v2.0.2

2.0.2 (2024-09-16)

Bug Fixes

• native-renderer: resolve unknown named module "react-native-svg" issue (b1dc3e8)

v2.0.1

2.0.1 (2024-09-16)

Bug Fixes

• expo web build issue (29992db)

v2.0.0

2.0.0 (2024-09-16)

Next.js and Vite support added!

Add comment line to entryfile of your project (App.js or App.tsx or main.tsx or _layout.tsx)

// @@iconify-code-gen

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Add plugin to babel.config.js

module.exports = {
  presets: [
    ...
  ],
  plugins: [
    [
      'react-native-iconify/babel',
      {
        icons: [
          'mdi:heart',
          'mdi:home',
          'mdi:account',
          'feather:activity',
          // Add more icons here
        ],
      },
    ],
  ],
};

Add plugin to vite.config for Vite

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [
          [
            'react-native-iconify/babel',
            {
              icons: [
                'mdi:heart',
                'mdi:home',
                'mdi:account',
                'feather:activity',
                // other icons
              ],
            },
          ],
        ],
      },
    }),
  ],
});

Add plugin to next.config.mjs for Next

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.(js|jsx|ts|tsx)$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['next/babel'],
          plugins: [
            [
              'react-native-iconify/babel',
              {
                icons: [
                  'mdi:heart',
                  'mdi:home',
                  'mdi:account',
                  'feather:activity',
                  // Add more icons here
                ],
              },
            ],
          ],
        },
      },
    });

    return config;
  },
};

export default nextConfig;

Warning

You can not use "next/font" with babel

Usage

Using the react-native-iconify library is straightforward. First, you need to call the Iconify component and provide the icon name using the icon prop:

import React from 'react';
import { Iconify } from 'react-native-iconify';
// or
import { Iconify } from 'react-native-iconify/native';

// for web (not react-native-web)
import { Iconify } from 'react-native-iconify/web';

const ExampleScreen = () => {
  return <Iconify icon="mdi:heart" size={24} color="#900" />;
};

export default ExampleScreen;

Features

• implement dynamic import (c10e911)
• implement multiplatform support (2213bfd)
• implement variable support (ca34ae2)

v1.0.2

1.0.2 (2024-05-24)

v1.0.1

1.0.1 (2024-01-25)

v1.0.0

1.0.0 (2024-01-25)

Features

• add react-native-web support (0bec175), closes #8

v0.2.12

0.2.12 (2024-01-25)

Full Changelog: v0.2.11...v0.2.12

v0.2.11

0.2.11 (2024-01-19)

Features

• update iconify version (078511d)

v0.2.10

0.2.10 (2023-07-06)

Bug Fixes

• add react-native-svg as devDependencies for type declarations (0f1c996)
• remove react-native-svg from dependencies (191b5e7)

v0.2.9

0.2.9 (2023-07-06)

Bug Fixes

• change react-native-svg version (944b58f)