I can import fontawesome-icons in app.js:
import {createApp} from 'vue';
import app from "../vue/app";
import {library} from '#fortawesome/fontawesome-svg-core';
import {FontAwesomeIcon} from '#fortawesome/vue-fontawesome';
import {faWrench} from '#fortawesome/free-solid-svg-icons';
library.add(faWrench);
createApp(app)
.component('fa', FontAwesomeIcon)
.mount("#app");
and use them in components like so:
<fa :icon="[ 'fa', 'wrench' ]" size="2x"></fa>
The font-awesome-animation npm doc tells to use this:
<i class="fa fa-wrench faa-wrench animated"></i>
but it doesn't seem to work in Vue 3.
I've tried importing font-awesome-animation after installing it like so:
import {faaWrench} from 'font-awesome-animation';
library.add(faaWrench);
but it breaks the site and the console shows:
Uncaught TypeError: Cannot read properties of undefined (reading 'prefix')
How do I use font-awesome-animation in Vue 3?
font-awesome-animation is just a collection of CSS animation keyframes, defined as global styles. The package does not have any exports, so don't try to import anything from it (which would just be undefined, leading to the error you observed when trying to add it to the icon library).
To use font-awesome-animation from NPM, import its CSS file like this:
// main.js
import 'font-awesome-animation/css/font-awesome-animation.min.css'
Then append the faa-ANIMATION_NAME (where ANIMATION_NAME is one of the animations from the library's animation list) and animated classes to a <font-awesome-icon>. For example, this markup applies the tada animation to the fas-snowman icon:
<font-awesome-icon :icon="['fas', 'snowman']" class="faa-tada animated" />
demo
Related
i am trying to integrate Feather icons in vuetify. Has anyone integrated any third party icon sets?
I personally have not done this but Vuetify provides a way for achieving that. See more here: Using custom icons docs. Also, this related question.
You can import and assign an svg to an icon value. The imported svg
should contain only the path without the <svg> wrapper.
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import myIconSvg from 'myIcon.svg'
Vue.use(Vuetify)
export default new Vuetify({
icons: {
iconfont: 'fa',
values: {
customIconSvg: myIconSvg,
customIconSvgPath: 'M14.989,9.491L6.071,0.537C5.78,0.246,5.308,0.244,5.017,0.535c-0.294,0.29-0.294,0.763-0.003,1.054l8.394,8.428L5.014,18.41c-0.291,0.291-0.291,0.763,0,1.054c0.146,0.146,0.335,0.218,0.527,0.218c0.19,0,0.382-0.073,0.527-0.218l8.918-8.919C15.277,10.254,15.277,9.784,14.989,9.491z',
},
},
})
When running a create-react-app app with react-bootstrap installed, I am getting this error below when trying to add a Button
My imports are like this:
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import PropTypes from "prop-types";
import { Button } from "bootstrap";
import { PureComponent } from "react";
and the render code:
render() {
return (
<div className="App">
<header />
<Button>Test</Button>
...
I have looked into lots of other questions talking about Babel, Webpack, and a compiler config. But I am not seeing all these configurations inside my create-react-app.
So, I found the problem. After 1 hour lost.
The mistake was on the suggested import that I've added.
Wrong:
import { Button } from "bootstrap";
Right:
import { Button } from "react-bootstrap";
My Vue JS app Bootstrap nav-bar does not work in mobile. I have installed the Bootstrap, JQuery and popper node modules. My Vue JS app displays the error Module Not Found. Can't resolve 'node_modules/bootstrap/dist/js/bootstrap'
Here is my code on my App.vue
<style lang="scss">
$primary: #05b2dd;
#import "node_modules/bootstrap/scss/bootstrap";
</style>
<script>
import "node_modules/jquery/dist/jquery.slim.min";
import "node_modules/popper/dist/popper.min";
import "node_modules/bootstrap/dist/js/bootstrap.min";
</script>
The file path in my Vue app is present: node_modules\bootstrap\dist\js\bootstrap.min.js
I've moved the import of the JS files to main.js. Here is the code snippet
import "../node_modules/jquery/dist/jquery.slim.min";
import "../node_modules/popper.js/dist/popper.min";
import "../node_modules/bootstrap/dist/js/bootstrap";
The navigation is now working on mobile
I want to use a tooltip from the bootstrap-vue.
When I add
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
to get the tooltip style,
then the whole view of my application is changing. Is it possible to import css only to my tooltip?
You can import the tooltip component from the src folder, like this
import 'bootstrap-vue/src/components/tooltip'
I'm new to react and antd.
I started a new react project using create-react-app. I installed antd (ant.design).
I tried out the DatePicker by adding an import and adding it to my render, modifying App.js as follows:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { DatePicker } from 'antd';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<DatePicker/>
</div>
);
}
}
export default App;
In Chrome it seems to work, although the styling is weird.
In IE11 it doesn't load because of a startsWith function call (startsWith not supported in IE11). However, the DatePicker demo at the ant.design website works in IE11.
It seems I'm missing some polyfills / old browser support somehow. If I try to do a production build and serve that, it also has the same error.
What needs done to get antd working for browsers such as IE11 with an app created via create-react-app?
Create-react-app doesn't include polyfills.
I worked around this by installing core-js and importing the es6 module I wanted in the src/index.js file:
import 'core-js/es6';
You can also import only the specific module you want:
import 'core-js/es6/function';
I recommend the first, since you'll most likely end up using more functions throughout your app.