I am trying to use the Icon class from Material UI v5, I added the following to my index.html
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
and then I use
import { Icon} from '#mui/material';
<Icon color="inherit">file_download</Icon>
But My icons still dont show
You can try to change the import path to import Icon from '#mui/material/Icon';
I finally managed to it working by adding all the Icons in my index.html file
From
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
to
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
I Think some icons dont work if you dont specify all of them in the stylesheet
Related
I have a multi language web project made by React.js & typescript and want to using bootstrap 5 CSS.
The problem is I want to dynamically change bootstrap CSS link on head section depend on language (ltr or rtl).
This link in public/index.html file:
<head>
...
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
...
</head>
convert to this dynamically:
<head>
...
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.rtl.min.css" integrity="sha384-mUkCBeyHPdg0tqB6JDd+65Gpw5h/l8DKcCTV2D2UpaMMFd7Jo8A+mDAosaWgFBPl" crossorigin="anonymous">
...
</head>
After changing language I want to modify CSS link for rtl or ltr.
I'm using method on rout and successfully changing HTML dir but looking to modify with React.js & TypeScript.
Is there any solution for doing this?
You can do this by using ReactHelmet.You can create a StyleSheetUrlSelector Component. Then based on your criteria, you can render whichever stylesheet you want to render.
import React,{ FC } from "react";
import ReactHelmet from 'react-helmet';
interface ICssSelector {
ltr:boolean;
}
const CssSelector:FC<ICssSelector> =(props)=>{
const {ltr} =props;
return(
ltr === true?
<ReactHelmet link={
[{"rel": "stylesheet", type:"text/css", "href": "/style.ltr.css"}]
}/>
: <ReactHelmet link={
[{"rel": "stylesheet", type:"text/css", "href": "/style.rtl.css"}]
}/>
);
}
export default CssSelector
Im wondering about the best way to import svg image to be used as favicon in react
i have following code, which works:
import { favicon } from './static/favicon'
<link href="${favicon}" rel="shortcut icon" />
But here, favicon icon is exported const from .ts file:
export const favicon = `
data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...0Y/QTN1SKbITsFi0AAAAASUVORK5CYII=
`;
I was wondering if i can somehow just use .svg file and export that to be used?
if i try to do:
import favicon2 from './static/favicon.svg'
<link href="${favicon2}" rel="shortcut icon" />
i will get function%20SvgFavicon(props)%20%7B%20%20return%20/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__[ error in the console.
you can have a customizable icon with this library
https://github.com/oblador/react-native-vector-icons
I'm fetching data from api call in _document.js, and based on data putting condition to include css using Link tag.
I was trying to include css file from public/static/ folder in _document.js or layout.js file,
but not working.
layout.js file
import React from 'react';
import Head from 'next/head'
...
<Head>
<link rel="stylesheet" href="public/static/ed_style.css" />
</Head>
...
I think your link is not correct. You can try an absolute one like this
<link rel="stylesheet" href="/static/ed_style.css" />
You should use import NextHead from 'next/head' instead of import Head from 'next/head'
Create your own Head component :
const Head = () => (
<NextHead>
<link rel="stylesheet" href="static/ed_style.css" />
</NextHead>
)
And then in your layout.js
import Head from '../components/head.js'
Thank you guys for you time.
I got solution.
I have put my css file ed_style.css directly to public folder and accessed as below.
<link rel="stylesheet" href="/ed_style.css" />
and Its working
I am working in a project with react and my client wants me to have a button to toogle between Bootstrap and Foundation.
I have checked some options and I came to the conclusion that it is best to use hooks to manage each of the state, but I don't know how to import them correctly.
const theme = (mode: string) =>
mode === "dark"
? "bootstrap/dist/css/bootstrap.css"
: "foundation-sites/dist/css/foundation.min.css";
export default theme;
import theme from "./theme/experiment.js";
ReactDOM.render(<App />, document.getElementById("root"));
I expect React to import the correct theme base on the value of "mode"
You can import css in your virtual DOM in react component.
<link rel="stylesheet" type="text/css" href="bootstrap/dist/css/bootstrap.css" />
That means you can change href attr by using state.
<link
rel="stylesheet"
type="text/css"
href={this.props.isBootstrap ? "bootstrap/dist/css/bootstrap.css" : "foundation-sites/dist/css/foundation.min.css"}
/>
Of course you can change your css by state or props.
I am new to react.js. I downloaded a theme which have external JavaScript libraries i.e bootstrap.min.js , jquery.min.js, slider.js, jquery-flexslider.min.js.
I created a React app using create-react-app and I copied all the external JavaScript libraries and CSS files in index.html of the public folder of my react app and copied all the html of index.html of my theme in app.js which I downloaded. All the CSS are working fine but the JavaScript libraries are not working on the page.
Following is the demo of how I included the css files and javascript libraries in index.html of the public folder.
<script src="/assets/javascript/jquery.min.js"></script>
<script src="/assets/javascript/bootstrap.min.js"></script>
<script src="/assets/javascript/jquery.easing.js"></script>
<script src="/assets/javascript/jquery-waypoints.js"></script>
<link rel="stylesheet" type="text/css"href="/assets/stylesheets/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/style.css"/>
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/responsive.css"/>`
Now my question is, how should I include the JavaScript libraries so that it start working. I tried to put all the files in the src folder of my react app but it still not working.
You should consider using react-bootstrap instead of jquery and a minified bootstrap file. By using react-bootstrap you get bootstrap 3 (4 is in the works) as nicely designed react components that you can selectively import and use. So then you can
import React from 'react'
import{ string } from 'prop-types'
import { Col, Row, Label } from 'react-bootstrap'
const PrettyThing = ({ thing }) => (
<Row>
<Col xs={9} xsOffset={1}>
<Label bsStyle="success">{thing}</Label>
</Col>
</Row>
)
PrettyThing.propTypes = { thing: string.isRequired }
export default PrettyThing
and webpack will handle how that's all sliced and diced so only the css you need gets built.
see https://react-bootstrap.github.io/getting-started/introduction/ for more info.