oblador / react-native-vector-icons

Customizable Icons for React Native with support for image source and full styling.
https://oblador.github.io/react-native-vector-icons/
MIT License
17.45k stars 2.12k forks source link

createIconSetFromIcoMoon for web #1350

Open samaneh-kamalian opened 3 years ago

samaneh-kamalian commented 3 years ago

Environment

npx react-native info
info Fetching system and libraries information...
System:
    OS: macOS 11.1
    CPU: (4) x64 Intel(R) Core(TM) i5-5350U CPU @ 1.80GHz
    Memory: 173.40 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 15.2.1 - /usr/local/bin/node
    Yarn: Not Found
    npm: 7.4.3 - ~/node_modules/.bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.0 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.2, DriverKit 20.0, macOS 11.0, tvOS 14.2, watchOS 7.1
    Android SDK:
      API Levels: 29
      Build Tools: 28.0.3, 29.0.2
      System Images: android-29 | Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.6953283
    Xcode: 12.2/12B45b - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_275 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: ^16.13.1 => 16.13.1 
    react-native: ^0.63.4 => 0.63.4 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

"react-native-vector-icons": "^7.0.0"

Description

I use React native for an application for android and ios. now I want publish my app for web . So I use webpack to create bundle and use in react structure. In one of my pages, there is list of icons that I create with icomoon with this code:

import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import icoMoonConfig from './selection.json';
export default createIconSetFromIcoMoon(icoMoonConfig);

It works well in ios and android. but in web, it just show square as icons! how can show icons of icomoon correctly like android and ios in web?

Demo

Screen Shot 2021-05-23 at 11 49 05 AM

samaneh-kamalian commented 3 years ago

Anybody can help me? I searched a lot!

mohammadrahmanian commented 3 years ago

Hi. I have the same issue. Icons are being loaded correctly on iOS, Android, and even the web app when I run it in development mode but when I build and publish my web app all icons become squares.

samaneh-kamalian commented 3 years ago

Hi. Use react-icomoon

On Sat, Jul 17, 2021, 13:26 mohammadrahmanian @.***> wrote:

Hi. I have the same issue. Icons are being loaded correctly on iOS, Android, and even the web app when I run it in development mode but when I build and publish my web app all icons become squares.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/oblador/react-native-vector-icons/issues/1350#issuecomment-881861115, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANTD5NPOI5HTRL326HFXTH3TYFATTANCNFSM45LM24CQ .