react-fontawesome
react-fontawesome copied to clipboard
Changing default prefix
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"]}/>
I wonder what the API for this should look like.
Following the above configuration pattern, a possible API could be:
FontAwesomeIcon.defaultPrefix = "fal"
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}}/>
Is there any intention of this feature being supported? This would be massively helpful and solve things for many users I'd imagine.
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
)
Are you guys open to a PR for this feature?
@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 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!
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". 😩
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.
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.