I just found out that we can not use the hosted repo for Font Awesome if we don't pay the yearly subscription for the pro icons. So I need to host locally. I am following the instructions here: https://fontawesome.com/docs/web/setup/host-yourself/svg-js . And I have the fontawesome-pro-6.0.0-web
folder downloaded and added to an assets
folder in my project.
Now what I am confused about are the next steps, specifically in relation to React. I currently have code like this:
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faLongArrowDown } from '@fortawesome/pro-solid-svg-icons';
import { faPrintSlash } from '@fortawesome/pro-duotone-svg-icons';
...
<FontAwesomeIcon
icon={faLongArrowDown}
className={'download-arrow semi'}
/>
I can't figure out how to convert that to using the local assets. Can I still use the FontAwesomeIcon
component?
you can import the svg files into your component and use them as the source of your images like so:
import AddressBook from "./static/addressbook.svg";
export default function App() {
return (
<div className="App">
<img
src={AddressBook}
alt="icon"
style={{ height: "20px", width: "20px" }}
/>
</div>
);
}
here is a working example in a code sandbox: https://codesandbox.io/s/romantic-jackson-9ng2jn?file=/src/App.js:23-277
if you would prefer your icons to be react components here is an example of how that would look as well:如果您希望您的图标成为反应组件,这里也是一个示例:
import * as React from "react"
const SvgComponent = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props}>
<path d="M384 0H96C60.65 0 32 28.65 32 64v384c0 35.35 28.65 64 64 64h288c35.35 0 64-28.65 64-64V64c0-35.35-28.7-64-64-64zM240 128c35.35 0 64 28.65 64 64s-28.65 64-64 64c-35.34 0-64-28.65-64-64s28.7-64 64-64zm96 256H144c-8.8 0-16-7.2-16-16 0-44.2 35.8-80 80-80h64c44.18 0 80 35.82 80 80 0 8.8-7.2 16-16 16zM496 64h-16v96h16c8.8 0 16-7.2 16-16V80c0-8.84-7.2-16-16-16zm0 128h-16v96h16c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16zm0 128h-16v96h16c8.836 0 16-7.164 16-16v-64c0-8.8-7.2-16-16-16z" />
</svg>
)
export default SvgComponent
I have updated the codesandbox above to show how both examples would be used
After a lot of tinkering, I finally figured this one out. I was able to keep my <FontAwesomeIcon...
code intact and untouched and still use the pro icons hosted locally. All I did was add these two lines to the top of my index.js
file:
import './assets/fontawesome-pro-6.0.0-web/js/all.min';
import './assets/fontawesome-pro-6.0.0-web/scss/fontawesome.scss';
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.