javascriptecmascript-6destructuringjavascript-import

Import many icons from Font Awesome


I'm importing many FA icons:

import { faUsers, faCut, faBullhorn, faPenNib, faCircle, faPalette, faVolumeUp, faSmile, faGrin, faShekelSign, faTv, faUserTie, faFolder, faPaintBrush, faCircleNotch, faSignOutAlt } 
from '@fortawesome/free-solid-svg-icons'

library.add(faUsers, faCut, faBullhorn, faPenNib, faCircle, faPalette, faVolumeUp, faSmile, faGrin, faShekelSign, faTv, faUserTie, faFolder, faPaintBrush, faCircleNotch, faSignOutAlt)

How can I declare that list once and then re-use it? Would it be an array? Or an object ... of what?

I was thinking

const icons = {faUsers, faCut, faBullhorn, faPenNib, faCircle, faPalette, faVolumeUp, faSmile, faGrin, faShekelSign, faTv, faUserTie, faFolder, faPaintBrush, faCircleNotch, faSignOutAlt}

import icons from '@fortawesome/free-solid-svg-icons'

But of course that doesn't work. And what would I do for library.add()?

What is that object-looking thing that follows import ?


Solution

  • One solution is to create a new module that exports your specific icons.

    // icons.js
    export {
        faUsers,
        faCut,
        faBullhorn,
        faPenNib,
        faCircle,
        faPalette,
        faVolumeUp,
        faSmile,
        faGrin,
        faShekelSign,
        faTv,
        faUserTie,
        faFolder,
        faPaintBrush,
        faCircleNotch,
        faSignOutAlt
    } from '@fortawesome/free-solid-svg-icons';
    

    Then you can simply import your new module and consume it using spread syntax or use it directly.

    // library.js
    import {library} from '@fortawesome/fontawesome-svg-core'
    
    import * as icons from './icons';
    
    // using the spread syntax
    library.add(...Object.values(icons));
    
    // or using the variable directly 
    library.add(icons);