I am using icons from fontawesome in my website, however now I see that font-awesome is updated to version 5 and I want to use those icons. In meteor, I have the following line in my packages file:
fortawesome:fontawesome
This does not say that I am using version 4.7, how can I update this package to version 5?
EDIT:
I did
meteor npm install --save #fortawesome/fontawesome-free
I know see it under dependencies in my package.json:
"#fortawesome/fontawesome-free": "^5.1.0",
But how can I use it?
To use fontawesome 5 with Meteor Blaze you just need to follow the npm install guide:
$ meteor npm install --save #fortawesome/fontawesome-free
then import it and it's css/js content in your client/main.js file (or somewhere globally in your client code):
import '#fortawesome/fontawesome-free'
import '#fortawesome/fontawesome-free/css/all.css'
import '#fortawesome/fontawesome-free/js/all.js'
You can then place the icons in your templates:
<template name="fasExamples">
<i class="fas fa-camera-retro"></i>
</template>
There are a few different ways to use the new Font Awesome 5 icons but here is my favourite.
The icons are split in to different packages which you need to install based on whether or not you are going to use those specific icons.
Import the core FontAwesomeIcon component:
import FontAwesomeIcon from '#fortawesome/react-fontawesome';
Import any specific icons that you want to use from the NPM package they belong to:
import { faPlay, faBackward } from '#fortawesome/fontawesome-free-solid';
Then use the icon like this:
<FontAwesomeIcon className="add-classnames-like-this" icon={faPlay} fixedWidth />
Hope that helps
Related
This is the first time I am publishing a Vue component to NPM and everything works fine, except the fact that the CSS is not present. It all works as expected when I run it locally but if I create a test project, install the npm package and import the component there is no CSS.
Steps to reproduce:
Create a new Vue project
run npm install elementable-vue
Use this template for App.vue: https://github.com/sandermaas/elementable-vue/blob/master/src/App.vue
Change the import (in the template) to import ElemenTable from 'elementable-vue'
run 'npm run serve'
You can check out the source code on https://github.com/sandermaas/elementable-vue
I can't figure out why this is not working so any help is very much appreciated.
You need to import your css as well in app.vue of your newly created project:
<style>
#import '~elementable-vue/dist/elementable-vue.css';
</style>
I tried to add fontawesome to my laravel mdbvue environment
When I install mdbvue
npm install mdbvue
fontawesome will automatically be added to my package-lock.json and exists in the node_modules folder in #fortawesome.
Now I want to implement fontawesome. But how?
I tried something without success:
import '#fortawesome/fontawesome-free/css/all.min.css';
#import '#fortawesome/fontawesome-free/css/all.min.css';
Info: When I add
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
to my html-header it works.
Edit:
There seems to be a difference between using xampp and php artisan serve. When I use the last one, all icons are displayed correctly.
The package vuemdb changes the default name
So import fontawesome by the relative path in your app.scss
#import '#fortawesome/fontawesome-free/scss/fontawesome.scss';
According to this article importing fontawesome in resources/js/app.js file should work.
The ng-bootstrap website states bootstrap.js may interefere with ng-bootstrap.
Installing bootstrap with "npm install boostrap" installs the folder "/node_modules/bootstrap/js".
Will this conflict with ng-bootstrap? If so, what's the best way to prevent this conflict?
Thank you!
Navigate to your project folder, open a new shell window and do
npm install --save #ng-bootstrap/ng-bootstrap
after that, you can add the following to your module.ts
import {NgbModule} from '#ng-bootstrap/ng-bootstrap';
#NgModule({
...
imports: [NgbModule, ...],
...
})
export class YourAppModule {
}
I have a React component and I publish the component in NPM registry that I build with webpack. In my main project I consumed the component npm package JS like that:
import myComp from 'myComp';
The problem is that myComp also has CSS, that I build into dist/index.css with the help of webpack and ExtractTextPlugin (which builds all the css into one file).
And I want to consume the style like this:
import 'myComp/index.css';
Or
import 'myComp/index';
And in myComp npm package I want to expose it in a way that will support this import method.
NOTE: I don't want to import it directly from node_modules
import '../../../node_modules/myComp/index.css'; // bad
Thanks!
So it's easier than I thought, all you need to do is import the CSS like that (as I did in the question):
import 'myComp/dist/style.css';
And make sure your tools (browserify/webpack etc..) can handle loading css into your javascript file.
So the issue was more related to the building process.
Also, if you want to push specific code into npm registry you can use "files" inside package.json. This way you'll end up with just the files you need in npm registry.
files: [
"dist/*.css"
]
You can also use tools like:
https://github.com/rotundasoftware/parcelify - for browserify
https://www.npmjs.com/package/parcelify-loader - for webpack
But I didn't like them. It forces a dependency on the consumer of your npm package.
I'm writing a client-side app that is using Webpack, and I cannot figure out how to require the materialize-css package. I'm using Henrik Joreteg's hjs-webpack package, and with this the yeticss npm package is included by doing an import in a sass file (e.g. #import 'yeticss'), but this doesn't work for materialize. Requiring it straight up in the code (e.g. import 'materialize-css' in a JS file) like any other package also doesn't work.
In this case, unlike with yeticss, you need to go in and require the specific files, rather than just the package name, thus:
import 'materialize-css/dist/css/materialize.min.css';
import 'materialize-css/dist/js/materialize.min';
In my case I'm using create-react-app, and I was able to execute:
yarn add materialize-css
And then in my index.js (top level react file):
import '../node_modules/materialize-css/dist/css/materialize.min.css';
import '../node_modules/materialize-css/dist/js/materialize.min';