[FeatureRequest] I would like a `library.getIcons()` to help build a Icon picker

[Richard87]

Hi!

As the title suggest, I would love a method on the library called getIcons or similar to list all available icons :)

[robmadole]

@Richard87 ok, I can see this being valuable. Is the use case that you are providing the icon picker but you are not the one calling library.add()?

[Richard87]

Hi!

I'm planning to build our IconPicker, but haven't started yet ;)

And I'm also the one calling library.add...

(Maybe a better aproach would be to lazy load all the icons when showing the available icons, and letting the icon picker manage library.add())

[fev4]

Hello!

One example where this would be useful is when creating a Storybook and one wants to list all available icons inside the library without going back and forward for every new icon added to the library.

fontAwesome.js:

import {library} from '@fortawesome/fontawesome-svg-core'
import {faCandleHolder} from '@fortawesome/pro-light-svg-icons'
import {faGoogle} from '@fortawesome/free-brands-svg-icons'

/* Import any other icons here and add them to the library */

library.add(
  faCandleHolder,
  faGoogle
)

icon.stories.js:

import React from 'react'
import {storiesOf} from '@storybook/react'
import {select} from '@storybook/addon-knobs'

import Icon from '../components/ui/Icon'
import '../lib/fontAwesome.js'

storiesOf('Icon', module).add('default', () => {

  const label = 'Icons'
  const defaultIcon = ['fal', 'candle-holder']
  /* Get the icons as an object of shape
  * {
  *   falCandleHolder: ['fal', 'candle-holder'],
  *   fabGoogle: ['fab', 'google'],
  * }
  */
  const availableIcons = library.getIcons()

  const icons = select(label, availableIcons, defaultIcon)

  return <Icon iconValue={icons} />
})

Is that even possible? Just chiming in to share an idea.

[victorheringer]

I think this is not a clean solution, but maybe can help.

import { faTimes } from '@fortawesome/free-solid-svg-icons'
import { faGithub } from '@fortawesome/free-brands-svg-icons'
import { library } from '@fortawesome/fontawesome-svg-core'

library.add(faTimes)
library.add(faGithub)

/**
 * Gets icons from library with ["fas", "edit", "fasEdit"] shape
 *
 * @return array
 */
const getLibIcons = library => {
  
  const data = library.definitions;

  const toPascalCase = str => {
    let camelCase = str.replace(/-([a-z])/g,  val => val[1].toUpperCase() )
    return camelCase.charAt(0).toUpperCase() + camelCase.slice(1)
  }
  
   return (Object.keys(data).map(key => 
     Object.keys(data[key]).map(value => [key, value, key + toPascalCase(value)])
   )).reduce((current, next) => current.concat(next))
}

// will produce [["fas", "times", "fasTimes"], ["fab", "github", "fabGithub"]]
console.log(getLibIcons(library)) 

With the array you can easily turn it to any shape you want.

[Richard87]

Hi!

Thanks, my current solution is slightly "lower tech" ;)

import fontawesome from "@fortawesome/fontawesome";
import {
    faUser, faCoffee, faQuestionCircle, faWheelchair, faBlind,
    faHospitalSymbol, faAmbulance, faFirstAid, faBrain, faHeart, faExclamation,
    faBold, faItalic, faMapMarkerAlt, faPhone, faEnvelopeOpen, faBriefcase, faExternalLink,
    faSpinner, faInfoCircle, faAlarmClock, faSearch, faBars,
} from "@fortawesome/pro-solid-svg-icons";
import {faCalendar, faPlus} from "@fortawesome/pro-light-svg-icons";
import {faFacebook, faYoutube} from "@fortawesome/free-brands-svg-icons";

export const availableIcons = [
    faUser, faCoffee, faQuestionCircle, faWheelchair, faBlind, faHospitalSymbol, faAmbulance,
    faFirstAid, faBrain, faHeart, faExclamation, faFacebook, faYoutube, faBold, faItalic, faMapMarkerAlt,
    faPhone, faEnvelopeOpen, faBriefcase, faExternalLink, faSpinner, faInfoCircle,faAlarmClock,faSearch,
    faCalendar,faBars,faPlus
]

fontawesome.library.add(...availableIcons)

Then I can import availableIcons and check use that list ;)