@fortawesome/free-brands-svg-icons

The iconic font, CSS, and SVG framework

6.7.1
latest
Source
npm

Version published: 3 weeks ago

Weekly downloads: 563K; increased by6.61%

Maintainers: 7

Weekly downloads

Created: 7 years ago

What is @fortawesome/free-brands-svg-icons?

@fortawesome/free-brands-svg-icons is a package that provides a collection of brand icons as SVGs. These icons can be used in web applications to represent various brands, such as social media platforms, technology companies, and other well-known entities. The package is part of the Font Awesome icon library, which is widely used for adding scalable vector icons to web projects.

What are @fortawesome/free-brands-svg-icons's main functionalities?

Importing and Using Icons

This feature allows you to import specific brand icons from the package and add them to the Font Awesome library. The `dom.watch()` method ensures that the icons are rendered correctly in the DOM.

const { faFacebook, faTwitter } = require('@fortawesome/free-brands-svg-icons');
const { library, dom } = require('@fortawesome/fontawesome-svg-core');
library.add(faFacebook, faTwitter);
dom.watch();

Using Icons in React

This feature demonstrates how to use the brand icons in a React application. By importing the `FontAwesomeIcon` component from `@fortawesome/react-fontawesome` and the specific icons from `@fortawesome/free-brands-svg-icons`, you can easily include these icons in your React components.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faFacebook, faTwitter } from '@fortawesome/free-brands-svg-icons';

function App() {
  return (
    <div>
      <FontAwesomeIcon icon={faFacebook} />
      <FontAwesomeIcon icon={faTwitter} />
    </div>
  );
}

export default App;

Using Icons in HTML

This feature shows how to use the brand icons directly in an HTML file by including the Font Awesome CDN. The `fab` class is used to specify that the icon is a brand icon, followed by the specific icon class (e.g., `fa-facebook`, `fa-twitter`).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
  <title>Document</title>
</head>
<body>
  <i class="fab fa-facebook"></i>
  <i class="fab fa-twitter"></i>
</body>
</html>

Other packages similar to @fortawesome/free-brands-svg-icons

@fortawesome/free-brands-svg-icons - SVG with JavaScript version

"I came here to chew bubblegum and install Font Awesome 6 - and I'm all out of bubblegum"

Installation

$ npm i --save @fortawesome/free-brands-svg-icons

$ yarn add @fortawesome/free-brands-svg-icons

Documentation

Get started here. Continue your journey here.

Or go straight to the API documentation.

Issues and support

Start with GitHub issues and ping us on Twitter if you need to.

Keywords

FAQs

What is @fortawesome/free-brands-svg-icons?

Is @fortawesome/free-brands-svg-icons popular?

Is @fortawesome/free-brands-svg-icons well maintained?

Package last updated on 20 Nov 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install