I'm a bit confused. In my web project, I'm using React and for iconography, I'm using the React Icons library.
The thing that confuses me is: Every time I want to use an icon, the IDE (in my case JetBrains WebStorm) suggests two available import locations.
Apparently, the icon exists in the parent all directory, but also in a specific directory with the same name the icon has.
import { FaStackOverflow } from "#react-icons/all"
import { FaStackOverflow } from "#react-icons/all-files/fa/FaStackOverflow"
Which one should I use?
Import icons from all, not from a subdirectory
The following hint is given in the docs:
NOTE: each Icon package has its own subfolder under react-icons you import from.
Also, after some experiments, I realized that using the icon from the all directory is the right one. I had issues when styling the icon (using a global class name provided in the <IconContext.Provider> parent element), so I changed the import location, and voilà, it worked!
Here is a demo. I'm using the following CSS to style the icon.
.icon {
outline: 1px solid hotpink;
}
This is the JSX code:
<IconContext.Provider value={{ className: 'icon' }}>
<FaStackOverflow />
</IconContext.Provider>
When importing the icon from the subdirectory, the styles are not applied correctly:
import { FaStackOverflow } from "#react-icons/all-files/fa/FaStackOverflow"
In contrast, this is the import from the correct location (directory all).
import { FaStackOverflow } from "react-icons/all"
Related
For context, I'm creating a project using Vue 2.6.6, Vuetify 2.1.7, and Font Awesome 4.7.
When I use a v-checkbox component, or a component that utilizes the v-checkbox component such as the <v-combobox> component, the resulting checkbox will have the correct checked icon, but an incorrect unchecked icon. The class applied to the checked icon will be fa fa fa fa-check-square (not sure whats up with the 3 separate fa classes, but whatever) and the unchecked icon will be far fa-square.
I'm able to bypass this issue by setting the property off-icon="fa fa-square-o" on my <v-checkbox> components. However, the <v-combobox> doesn't support this property and also it seems like a bit of a hack, so I would like to avoid taking this route.
My import file looks roughly like the following snippet. I've excluded unrelated theme declarations.
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
export default new Vuetify({
icons: {
iconfont: 'fa4'
},
theme: {
options: {
customProperties: true
}
}
})
From what I understand, all of the auto generate icons should be using fa instead of far in their classes since I'm setting the icons.iconfont property to 'fa4'. Hopefully I'm missing something obvious, but any input is appreciated!
I am writing my first application using Fusion Js and land up into a problem in using icons, for any Font-awesome icons or Material react icons, as soon as I add icons to my template it give me an error
‘‘You may need an appropriate loader to handle this file type‘‘
import React from 'react';
import {styled} from 'fusion-plugin-styletron-react';
import MaterialIcon, {colorPalette} from 'material-icons-react';
const TopBar = styled('div',{
height:'30px',
width: '100%',
position:'fixed',
top:'0',
zIndex:'99',
backgroundColor:'#4b4b4b',
display:'flex',
boxShadow:'0px 0px 8px 0px #000000'
});
const Brand = styled('div',{
color:'#ffffff',
});
export default () => (
<TopBar>
<span></span>
<Brand>
<span> Observe Point</span>
</Brand>
<div>
<span></span>
<span><MaterialIcon icon={'search'}></MaterialIcon></span>
</div>
</TopBar>
);
What i know is that, this error usual occurs while bundling, but I am not sure how to fix this.
Need help.
Fusion.js at this time does not support custom webpack loaders. We do have some techniques to load SVGs though, and have documented a strategy here: https://fusionjs.com/docs/guides/svg-react-components
I'd love to find a way to be more compatible with material-ui though, so perhaps we can look at implementing a fusion-plugin-material-icons or similar in the future.
This is the component I am trying to render which is being mapped over and the necessary props are being dropped in. One of those props are an image that is sitting in the local directory. When i type in that same '..images/example.png' it will load with out a problem. But when this data is being mapped over and the image directory is being dropped in as the image prop, it says that it cannot find the module. Any ideas why or what I can do to remedy this?
import React, {Component} from 'react';
import {Link} from 'react-router-dom'
class Project extends Component {
render(){
let {
id,
image
}
= this.props
return(
<div className='project-container'>
<h1>{id}</h1>
<img src={require(image)} />
<p>description</p>
<p>technologies used</p>
<img src={require('../images/git.png')} />
</div>
)
}
}
export default Project;
Your image prop shouldn't contain the path to image. But just the name of the image. Then you should read the image by doing something like
<img src={require('../images/'+image)}
Make sure the variable image just has the name of the actual image and not the path.
Two possibilities I can think of.
If you have created your React app using create-react-app, then there should be a folder called public.
You need to put all your static assets (images, videos, mp3) in there.
If you have started from scratch (or from a boilerplate) using webpack, you need to import it (e.g. import Git from './img/git.png') and configure the webpack to handle PNG or other types or image files.
I have a very specific issue with Preact/React:
I have a .md file with some text, which uses react-router's <Link> tags inside for navigation. Like this:
## Heading
<Link to="/test">Let's go here</Link>
In my Component file, I render the Markdown and import the Link Component and pass the Link-components down, using the preact-markup component:
...
import {Link} from 'react-router-dom';
import text from './text.md';
import Markup from 'preact-markup';
export default class Comp extends Component {
render() {
return <Markup markup={text} components={{Link, HashLink}} />;
}
}
For importing the markdown, I use the #nuxtjs/markdown-it-loader, which works fine. It all works as expected, but doesn't feel clean.
I would like to be able to either import the Link components inside the markdown file, which would save me some boilerplate code for every view.
Or, even better, I would like to be able to write my markdown inside the Component itself, with the appropriate imports, and compile it all to HTML at build time.
I don't like runtime components since they need downloading and parse- and render time.
I can't get Quill to render toolbar correctly I read their docs and check webpack example.
Added webpack aliases,
resolve: {
alias: {
'parchment': utils.resolve('node_modules/parchment/src/parchment.ts'),
'quill$': utils.resolve('node_modules/quill/quill.js'),
}
}
then created Quill export file like so
`quill-build.js`
```js
import Quill from 'quill/core';
import Toolbar from 'quill/modules/toolbar';
import Snow from 'quill/themes/snow';
import Bold from 'quill/formats/bold';
import Italic from 'quill/formats/italic';
import Header from 'quill/formats/header';
Quill.register({
'modules/toolbar': Toolbar,
'themes/snow': Snow,
'formats/bold': Bold,
'formats/italic': Italic,
'formats/header': Header,
});
export default Quill;
```
Imported it in my component and when attaching it to html element here is what I get
This is what I get inside chrome devtools when inspecting this tag.
If I import quil.min.js from cdn it renders everything correctly, but that is useless if I can't customize my build and remove unnecessary elements.
Did anyone had success doing that, can someone help me with this, please?
I know that's an old issue but as it is still a problem the solution is to use: https://v4.webpack.js.org/loaders/svg-inline-loader/
instead of the html-loader from the webpack quill example