@fortawesome/fontawesome-svg-core#library JavaScript Examples

export default function CommitLogCardComponent(props) {
  library.add(fas);
  const { item, setCommitType } = props;

  return (
    <div
      className="flex p-3 justify-between items-center mx-auto border-b w-full cursor-pointer hover:bg-gray-100"
      key={item.hash}
      onClick={() => {
        setCommitType(item.hash);
      }}
    >
      <div className="block p-2 font-sans font-light text-gray-800">
        <div className="my-2 font-sans text-xl font-light text-blue-600 border-b border-dashed">
          {item.commitTime.split(" ")[0]}
        </div>
        <div className="w-3/4">{item.commitMessage}</div>
        <div className="flex items-center gap-4 my-2 align-middle">
          <div>
            <FontAwesomeIcon
              icon={["fas", "user-alt"]}
              className="text-indigo-500"
            ></FontAwesomeIcon>
          </div>
          <div className="font-semibold font-sans">{item.author}</div>
        </div>
      </div>
      <div className="block">
        <div className="shadow border rounded text-sm p-2 bg-indigo-100 font-mono font-semibold text-indigo-800">
          #{item.hash.substring(0, 7)}
        </div>
        <div className="my-2 shadow border rounded text-sm p-2 bg-yellow-50 font-sans font-semibold">
          {relativeCommitTimeCalculator(item.commitTime)}
        </div>
      </div>
    </div>
  );
}

library.add(
  faFileDownload,
  faTrash,
  faBars,
  faCheckSquare,
  faCheck,
  faPlus,
  faCogs,
  faServer,
  faLaptop,
  faMobileAlt
);

// Register the FontAwesome icons.
library.add(
  faArrowFromLeft,
  faArrowToRight,
  faCheck,
  faEquals,
  faKey,
  faQuestion,
  faThumbtack,
  faTimes
);

library.add(
  faReact,
  faAtom,
  faFieldHockey,
  faTreasureChest,
  faFilm,
  faCameraHome,
  faWatch,
  faPlus,
  faEquals,
  faArrowRight,
  faCheck
)

Icons = () => ({
  props: {
    size: {
      type: String,
      default: 'fa-2x'
    },
    onClick: {
      type: Function,
      default: () => () => {}
    }
  },
  components: { IconsList },
  data () {
    return {
      icons: getLibIcons(library)
    }
  },
  template: '<IconsList :icons="icons" :size="size" :onClick="onClick" />'
})

library.add(
  faBars,
  faTimes,
  faChevronDown,
  faChevronUp,
  faCalendarAlt,
  faTelegramPlane,
  faTwitter,
  faMediumM,
  faRedditAlien,
  faQuestionCircle,
  faCheck,
  faSearch,
);

getLibIcons = (library) => {
  const data = library.definitions

  const toPascalCase = (str) => {
    const 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), [])
}

library.add(
  far,
  fas,
  faBookReader,
  faArrowLeft,
  faArrowRight,
  faQuestionCircle,
  faCopy,
  faSignOutAlt,
  faEdit,
  faAngleDown,
  faExternalLinkAlt,
  fab,
  faEthereum,
  faTwitter,
  faDiscord,
  faUnlink,
  faSearch,
  faFortAwesome,
  faExchangeAlt,
  faChartPie,
  faGlobe,
  faDonate,
  faDollarSign,
);

library.add(
  faHome,
  faInfoCircle,
  faUser,
  faYoutube,
  faBookmark,
  faSignOutAlt,
  faCaretDown,
  faArrowAltCircleLeft,
  faArrowAltCircleRight,
  faAtom,
  faMap
);

// Allow arbitrary icons to be used without importing them
library.add(fas)

library.add(faEyeSlash, faEye);

export default function CompareSelectionHint() {
  library.add(fas);

  const selectionHints = [
    {
      message: (
        <div className="my-10 font-sans text-xl font-semibold">
          Select
          <span className="mx-2 p-1 rounded-lg text-center text-white bg-gray-400">
            Branch Compare
          </span>
          for comparing two branches
        </div>
      ),
      icon: "code-branch",
    },
    {
      message: "",
      icon: "",
    },
    {
      message: (
        <div className="my-10 font-sans text-xl font-semibold">
          Select
          <span className="mx-2 p-1 rounded-lg text-center text-white bg-gray-400">
            Commit Compare
          </span>
          for comparing two selected commits
        </div>
      ),
      icon: "hashtag",
    },
  ];

  return (
    <div className="flex justify-around my-6 mx-auto text-gray-300 gap-10 w-11/12">
      {selectionHints.map((hint, index) => {
        if (hint.message) {
          return (
            <div className="w-1/3 block text-center" key={`hint-${index}`}>
              <div>
                <FontAwesomeIcon
                  icon={["fas", hint.icon]}
                  size="10x"
                ></FontAwesomeIcon>
              </div>
              {hint.message}
            </div>
          );
        } else {
          return (
            <div
              className="block p-1 border-r-4 boreder-dashed"
              key={`hint-${index}`}
            ></div>
          );
        }
      })}
    </div>
  );
}

library.add(fab)

library.add(
    faArrowAltCircleUp,
    faCog,
    faEdit,
    faEye,
    faEyeSlash,
    faList,
    faPause,
    faPlay,
    faPlus,
    faSearch,
    faTachometerAlt,
    faTimes,
    faTimesCircle,
    faTrash,
    faCheckCircle,
    faStream,
    faSave,
    faExclamationCircle,
    faBullhorn,
    faArrowsAltV,
    faUnlink,
    faQuestionCircle,
    faImages,
    faUpload,
    faCopy,
    faCheck,
    faFile,
    faAward,
    faLink,
    faChevronDown,
    faSignOutAlt,
    faPen,
    faExternalLinkSquareAlt,
    faSpinner,
    faUndo,
    faPlusCircle,
    faAngleDown,
    faLink,
);

library.add(faHatCowboySide, faDog, faCar, faCat, faShip,  faDollarSign, faFrog);

export default function registerIcons() {
  library.add(faApple, faFacebook, faGoogle, faMicrosoft);
}

library.add(far);

library.add(fas)

library.add(fab, faEnvelope, faPaperclip, faExternalLinkAlt, faFire, faCross)

library.add(fas);

library.add(fab, fas)

library.add(fab, fas, far);

library.add(fab);

// Font-awesome library
library.add(faImages, faGlobe, faArrowCircleLeft)

export default function () {
  library.add(faGithub, faWindows, faLinux, faTwitter, faReddit, faTelegram, faCheckCircle, faMicrochip, faTrashAlt,
    faPaperPlane, faSpinner, faFlask, faInfoCircle, faPen, faTools, faCheck, faPlus, faCog, faExclamationTriangle,
    faQuestionCircle, faSyncAlt, faInfinity, faDownload, faCopy, faPlug, faTimesCircle);
}

// Adding all the icons we need in the project
library.add(faHeart, faFire, faPalette, faMapPin, faMapMarker, faPhone, faMailBulk);

library.add(...(Object.values(ICONS)))

library.add(fab);

library.add(fab, faEnvelope, faPaperclip, faExternalLinkAlt, faFire, faCross)