react-fontawesome icon indicating copy to clipboard operation
react-fontawesome copied to clipboard

Changing default prefix

Open usefksa opened this issue 6 years ago • 10 comments

Is there anyway to change the default from solid to light or regular?

import { faCheckSquare, faCoffee } from '@fortawesome/fontawesome-pro-light'
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
fontawesome.library.add(brands, faCheckSquare, faCoffee)

I want to use <FontAwesomeIcon icon="coffee"/> instead of <FontAwesomeIcon icon={["fal","coffee"]}/>

usefksa avatar Dec 15 '17 10:12 usefksa

I wonder what the API for this should look like.

Following the above configuration pattern, a possible API could be: FontAwesomeIcon.defaultPrefix = "fal"

NateRadebaugh avatar Jan 06 '18 02:01 NateRadebaugh

Hi,

I made a wrapper which enables a shorter syntax. I understand that it will take all Boolean props and send them as icon, but with the object destructor, we could strip the ones we are interested in.

class FA extends Component {
  render() {
    const {...props} = this.props;
    const icon = Object.keys(props).filter(key => props[key] === true);
    return <FAIcon icon={icon} {...props}/>
  }
}

Then, we can use it with

<FA fal coffee/>

or

<FA far money-bill-alt style={{margin: 8}}/>

jean343 avatar Feb 20 '18 02:02 jean343

Is there any intention of this feature being supported? This would be massively helpful and solve things for many users I'd imagine.

IsenrichO avatar Dec 19 '18 21:12 IsenrichO

When using the library pattern, it seems odd that it would not default to what is explicitly added to the library. With maybe a fallback to redefining the type in the cases where you need duplicate entries or an explicit definition within the add() itself.

Something like this would be nice:

import { library } from '@fortawesome/fontawesome-svg-core'
import { faCheckCircle as fasCheckCircle } from '@fortawesome/free-solid-svg-icons'
import { faCheckCircle as farCheckCircle } from '@fortawesome/free-regular-svg-icons'

library.add(
  {icon: farCheckCircle, name: 'your-rename'}, 
  fasCheckCircle
)

mawburn avatar Jan 24 '19 18:01 mawburn

Are you guys open to a PR for this feature?

IsenrichO avatar Jan 25 '19 18:01 IsenrichO

@IsenrichO having default prefixes or doing as @mawburn suggested and having fallbacks would just add to the confusion. I'm not in favor of introducing this. I agree it's cumbersome but I'd like to look at other ways to solve it.

robmadole avatar Feb 12 '19 16:02 robmadole

@robmadole I'm not tied to any particular implementation and am not necessarily proposing a PR be done in the fashion suggested by @mawburn either. I just wanted to see if the FortAwesome team is at least interested in supporting this feature request eventually.

If I were to approach it though, I think I would handle this more by changing the signature of the library.add method from what it is now to something like

library.add(
  icons, // Array of individual icons or entire icon sets (e.g., faRegular)
  options, // Object of library-specific config options
);

where one could specify options.defaultPrefix (which would, of course, default to fas to remain consistent with the current behavior). Of course, this would be a breaking change but that's just my thoughts. I'm sure there's much more to think through though. Thanks for all your hard work on all the great fortawesome packages!

IsenrichO avatar Feb 12 '19 23:02 IsenrichO

Both global and local settings would be the best implementation.

library.add(...icons, { default: 'fal' })

<FontAwesomeIcon icon="spinner-third" />
<FontAwesomeIcon icon="spinner-third" lib="fas" />

99% of the time I just use one icon set and just want to set it globally, but surely there will be people who have one-off icons.

Another solution would just be to get rid of the concept of a prefix and just make people do <FontAwesomeIcon icon="falSpinnerThird" />. This is almost always what I intuitively go to do before remembering there is some wacky prefix "helper" doing some "helping". 😩

corysimmons avatar May 22 '19 13:05 corysimmons

Hello, wondering if there are still some plans to implement this. So very annoying to have a different version of the icon I want to use. For instance:

import { faArrowLeft, faHeart } from '@fortawesome/free-solid-svg-icons'

is giving me the fas heart version of the icon and I don't know how to change it.

Thanks again for the very awesome library.

migsan avatar Nov 16 '21 20:11 migsan

Hey there @migsan . That's because you are importing from @fortawesome/free-solid-svg-icons. We have separate packages for each style. So fas is free-solid-svg-icons.

robmadole avatar Nov 16 '21 22:11 robmadole