I have a problem adding the monitor_heart icon from material-design-icons/font to a react project. The icon is located here:
(https://marella.me/material-icons/demo/) you have to type "monitor_heart"
So far I added icons from material-ui without any problem unfortunately here I have a problem.
I have installed the package:
npm and #material-design-icons/svg
I imported the icon:
import monitor_heart from "#material-design-icons/svg/filled/monitor_heart.svg"
i add it to App:
div <monitor_heart /> /div //or {monitor_heart}
but it not work -I don't know how can I get to this specific icon and just execute it / show it on the screen. What I did it wrong? Can anyone help me?
code located here:
https://github.com/beginnerinreact/material-icon-problem
Ok now it works!
I had to add correct form of import:
import { ReactComponent as Monitor_heart } from "#material-design-icons/svg/outlined/monitor_heart.svg" where I have to stress that this is a React component
Related
Hi I am not sure if this is about my VScode settings or the way I installed bootstrap. I used yarn to install react-bootstrap and bootstrap as show in react-bootstrap's documentation. But when I type <Button and press enter it automatically imports <Button component like this:
import { Button } from "bootstrap";
this doesn't work. I have to manually fix it to
import { Button } from "react-bootstrap";
is it a bug or did I do something with wrong order?
If you have inline suggestions turned on (Preferences -> Text Editor -> Suggestions), you'll see that Intellisense provides import suggestions alphabetically — first by identifier then by package.
With inline suggestions, you're given a list you can navigate through to select whichever option you're looking for. In this case, you'd type But and it would show the react-bootstrap Button as the second option, so you'd press down arrow and tab to accept that option.
I installed and imported mui-image into my React project and used it as a component <Image>. The issue is my png image did not showed up on screen (neither svg). However, I inserted a random image link on the internet and it worked. Does that mean my the issue is from my png image? And how do I fix this bug?
I installed npm i mui-imagethen imported import { Image } from "mui-image" to my index.js file
then imported my png image as
import { mypng } from "../img/mypng.png";
...<Image src={mypng} />
(mypng has the dimension of: 2880 × 800)
However, it worked with a random url:
<Image src="https://source.unsplash.com/200x200" />
I would really appreciate your help!
You're using object deconstruction in your import. "../img/mypng.png" has no property called mypng. Try :
import mypng from "../img/mypng.png";
I wanted to use icons in my react-native app, so I installed react-native-elements. The Icons itself work but I have to add a property called tvParallaxProperties on the Icon element like that:
<Icon tvParallaxProperties={undefined} name={'up'} type="antdesign" />
I read the docs and google about that, but I cant find the use of that. Does anyone know why I need this property and whats the use of it?
If you don't want to write this option under all of the Icons there's 2 solutions.
First which I don't recommend if you are creating real project not for training purpose.
Install RN Elements bleeding Edge from docs and the newest BETA version (unstable).
Or which worked for me is change imports of Icons like:
import { Icon } from 'react-native-elements' to: import Icon from 'react-native-vector-icons/AntDesign';. The last element of import of course is your Icons package and you can change it fe. to: MaterialCommunityIcons
After adding this import you can delete option type: antdesign and this tvParallaxProperties={undefined}
Like docs says tvParallaxProperties are for (Apple TV only) Object with properties to control Apple TV parallax effects.
I'm trying to get the values on each bar with the chartjs datalabels plugin.
So above the bar 'a' a want to see the number 30 and above or inside bar 'b' I want to see the number 50.
But it isn't showing any values at all.
Can anyone help and tell me what's wrong?
I've also tried to use different versions of chartjs but it didn't help.
Currently I'm using Chartjs 3.2.0
and for the chartjs-plugin-datalabels 2.0.0
here is an example in codesandbox
https://codesandbox.io/s/chart-js-plugin-5ez9p?file=/src/App.tsx
As per the documentation you still need to register the plugin before you can use it:
import {Chart} from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';
Chart.register(ChartDataLabels);
Working codesandbox: https://codesandbox.io/s/chart-js-plugin-forked-dig8k?file=/src/App.tsx
First you need to register the chartjs-plugin-datalabels plugin.
For Registration you can also add plugins props to your TsChart.
import ChartDataLabels from "chartjs-plugin-datalabels";
In TsChart tag add plugins props which accepts
Chart.PluginServiceRegistrationOptions[]
Eg. **TsChart type="bar" data={data} options={options} plugins={[ChartDataLabels]}**
I am trying to customize a React Router Link "button" with a custom SVG image. I have found different sources with custom icons to be used, or solution like this but did not succeed with custom image file.The Router link is part of a dynamic list:
<td><Link to={} data-id={} className={"btn btn-success"}>Add new image</Link></td>
And the text would be moved as a hint upon mouseover effect. Any suggestion would be highly appreciated.
Update 1:
So i have tried with and with src. Of course it didnt render and run into error.
I have imported
import { ReactComponent as AddNewImageIcon } from "./WebAppButtons/AddPhoto.svg";
<td><Link to={``} data-id={} className={""}>{<AddNewImageIcon />}Add new image</Link></td>
In this way, it renders, however, there is a weird image background appears under the image:
Screenshot
Did not experience it with SVG files before. Is there any way to remove it or is it the behavior of SVG file in react? The other question is, should it be wrapped into DIV that would be formatted with SCSS or this component can be formatted with SCSS as well, eg.:width/height/hover etc.?