# SVG Core

Details about the SVG Core library and its role in Font Awesome.

> We provide more advanced packages that are suitable for more specialized situations. These packages are side-effect free and provide no automatic replacement of `<i>` tags to `<svg>` tags (although it can still be used through `dom.watch()`).

The `@fortawesome/fontawesome-svg-core` package documentation can be found in
our [Javascript API Docs](/apis/javascript.md).

## What's SVG Core for?

The SVG core package is helpful and recommended in the following cases:

- to subset a large number of icons into only the icons that you are using
- as base libraries for larger integrations with tools like
  [React](https://github.com/FortAwesome/react-fontawesome),
  [Angular](https://github.com/FortAwesome/angular-fontawesome),
  [Vue](https://github.com/FortAwesome/vue-fontawesome), or
  [Ember](https://github.com/FortAwesome/ember-fontawesome) (in fact our own
  components use these packages)
- as CommonJS/ES6 Modules bundling tool like [Webpack](https://webpack.js.org),
  [Rollup](https://rollupjs.org), or [Parcel](https://parceljs.org)
- as UMD-style loader library like [RequireJS](http://requirejs.org)

These are ES6 module compatible for tools that support this, such as Rollup. Our
icon content packages also **support tree shaking which allows compatible tools
to remove icons you are not using from your final build**.

## Comparing the Basic Packages and SVG Core

Our Basic packages (`@fortawesome/fontawesome-free` and
`@fortawesome/fontawesome-pro`) are aimed at individuals who would like to
quickly integrate Font Awesome into their projects but do not want to invest
the time and effort to understand what's going on under the hood. For this
reason a lot of the behavior is automatic and works without any intervention.

In contrast, the `fontawesome-svg-core` package is for more specialized
situations or for forming the underlying API to power other components or
libraries. In fact, our own official components for Vue, React, Ember, and
Angular all use the `fontawesome-svg-core` package under the hood.

Because of this the core package and the icon content packages avoid doing
anything automatic or creating side-effects that make development with them
difficult to control or reason.

One of the most common use cases where you would reach for the core package
instead of using `fontawesome-free` or `fontawesome-pro` is to **create a
subset of icons to reduce your final bundled file size**.

For this case you may still want the `<i>` tags to be replaced with `<svg>`
tags. This is the default behavior when using the CDN or `fontawesome-free` and
`fontawesome-pro` packages. **This does not happen automatically when using the core package**.

To accomplish this we will use the `dom` API.

```js
import { library, dom } from '@fortawesome/fontawesome-svg-core'
import { faUserAstronaut } from '@fortawesome/free-solid-svg-icons'

// We are only using the user-astronaut icon
library.add(faUserAstronaut)

// Replace any existing <i> tags with <svg> and set up a MutationObserver to
// continue doing this as the DOM changes.
dom.watch()
```