question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Is there a way to import all icon sets at once?

See original GitHub issue

Is there a way to import all fonts at once? Something like this :
import * as IconSets from "react-native-vector-icons" And in the render method: return <IconSets.MaterialIcons name="alarm" size={30} />

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
me-ibadcommented, Aug 20, 2022

This article will help you follow these steps https://medium.com/p/45c0afdb7ca7

1reaction
LuisRizocommented, Feb 12, 2018

That’s exactly what I did in a project. screen shot 2018-02-12 at 3 33 46 pm

index.js looks like this:

/**
 * Multiple ways to import:
 * 1- Importing a specific font as Icon
 * -- import Icon from './lib/Icons/FontAwesome'
 *
 * 2- Importing a specific font as its name
 * -- import {FontAwesome} from './lib/Icons'
 *
 * 3- Importing all fonts in an Icon object
 * -- import * as Icon from './lib/Icons'
 */

import MaterialCommunityIconsI from 'react-native-vector-icons/MaterialCommunityIcons'
import SimpleLineIconsI from 'react-native-vector-icons/SimpleLineIcons'
import MaterialIconsI from 'react-native-vector-icons/MaterialIcons'
import FontAwesomeI from 'react-native-vector-icons/FontAwesome'
import FoundationI from 'react-native-vector-icons/Foundation'
import EvilIconsI from 'react-native-vector-icons/EvilIcons'
import OcticonsI from 'react-native-vector-icons/Octicons'
import IoniconsI from 'react-native-vector-icons/Ionicons'
import FeatherI from 'react-native-vector-icons/Feather'
import EntypoI from 'react-native-vector-icons/Entypo'
import ZocialI from 'react-native-vector-icons/Zocial'
import React from 'react'

export const MaterialCommunityIcons = props => (
    <MaterialCommunityIconsI {...props} />
)
export const SimpleLineIcons = props => <SimpleLineIconsI {...props} />
export const MaterialIcons = props => <MaterialIconsI {...props} />
export const FontAwesome = props => <FontAwesomeI {...props} />
export const Foundation = props => <FoundationI {...props} />
export const EvilIcons = props => <EvilIconsI {...props} />
export const Ionicons = props => <IoniconsI {...props} />
export const Octicons = props => <OcticonsI {...props} />
export const Feather = props => <FeatherI {...props} />
export const Entypo = props => <EntypoI {...props} />
export const Zocial = props => <ZocialI {...props} />

Except that instead of importing from my local folder (for example: import ZocialI from './Zocial' ) I just imported directly from the library as you might just want to have a single file (index.js), and not a file per font like I do.

Other files look like this:

import Icon from 'react-native-vector-icons/Octicons'

export default Icon
Read more comments on GitHub >

github_iconTop Results From Across the Web

How to import icons from multiple files in react native vector ...
1- Create file Icon.js. · 2- After Import the Icon file: import Icon from '../../component/common/Icon'; · 3- And use like that:
Read more >
Best way to add or import Multiple or Many Icons to ... - YouTube
In this video you will learn the beginner approach to using HTML, Tailwindcss and React hooks to import Multiple icons.
Read more >
Introducing IconJar, the best tool for organizing icons
Once you have imported your icon sets into IconJar, you can create collections in the sidebar, and copy or move icons from other...
Read more >
Import React-Icons
Import any* of the many popular icon sets that are included in the react-icons library directly in to your Figma file. The icons...
Read more >
How to Use Popular Icon Sets in Your React Apps with ...
While is it possible to import all the icons from a set with a single import, it is not advisable. This will increase...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found