I am new at Laravel and Blade templating but loving it so far. I was able to successfully install via yarn add @fortawesome/fontawesome-pro to my project, but not sure how to use the SVG icons in a blade template. Thoughts?
Edit for clarity: I don’t want to load the font. I would much prefer to grab the SVG from the node modules and get it into a blade template.
You can always extract the SVG that you need, and just use the HTML with it. Maybe create a component “Icons” whre you call a certain icon. I did that with React, maybe there’s a possibility to do with WP. I think in controllers could create Icon class and just call the icon you need, without loading font-awesome.
Just an idea. I used webpack and font awesome and I don’t like it.
font-awesome’s original approach of using custom fonts isn’t needed/used these days anyway because SVG support is mainstream now. One can still use the original SVGs of it though.
I asked how to get Font Awesome’s icons in blade templates and you told me how to get them in my styles and scripts. I know how to do that. I want to grab the SVG icon itself from the installed package and put that in my blade template.
Blade doesn’t have a mechanism to do that. The package you described is a JavaScript package, managed by npm/yarn, so it’s not part of the PHP ecosystem that Blade understands. The answers described using your scripts and styles because those are the parts of sage with access to the npm ecosystem.
There is package for sage/blade that allows loading SVGs into blade templates:
You would copy the SVGs from the font awesome package into your theme `resources/, optionally use an optimizer like SVGO to minify it, and then load them from within the theme.