Is there any way to replace the navigation icons of react-material-ui datepicker? I have tried a lot but nothing works.
<button class="MuiButtonBase-root MuiIconButton-root MuiPickersCalendarHeader-iconButton" tabindex="0" type="button">
<span class="MuiIconButton-label">
<svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"></path>
<path fill="none" d="M0 0h24v24H0V0z"></path>
</svg>
</span>
<span class="MuiTouchRipple-root"></span>
</button>
Please check this: Material Ui datepicker - Styling the calendar icon in the text field
Here you have a working sandbox.
Related
I need to remove the hover while the checkbox is checked.
Hovering I implemented at the expense of styling based on parent state (group).
Tried method style based on sibling state, but didn't work either
<div className="group">
<input className="peer hidden" id="check" type="checkbox" />
<label
className="
peer/label
group-hover:bg-[#F2F2F2]
group-hover:border-2
group-hover:border-solid
group-hover:border-[#F2F2F2]
flex
justify-center
items-center
peer-checked:bg-[#4DD599]
peer-checked:border-2
peer-checked:border-solid
peer-checked:border-[#4DD599]
w-5
h-5
rounded-full
border-2
border-solid
border-[#E8E8E8]
cursor-pointer
inline-block
"
htmlFor="check">
<svg
className="
group-hover:opacity-100
relative
left-[0.5px]
"
width="11"
height="8"
viewBox="0 0 11 8"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
className="
group-hover:stroke-[#b2b2b2]
stroke-[#f2f2f2]
ease-in-out"
d="M9.29999 1.20001L3.79999 6.70001L1.29999 4.20001"
stroke="#000"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</label>
</div>
- not correct
my problem is center elements with Tailwind Grid.
GroupTooltipIcon1/GroupTooltipIcon2 are component that contain an svg.
I have to be able to center the svg component within this grid tailwind, can you help me?
<div className="mt-[75px] grid grid-cols-2 gap-2 justify-items-center">
<div>
<div className="iconInsideTooltip">
<GroupTooltipIcon1 width="48px" height="48px" />
</div>
<TextSection
p5={
<>
<div>
Testo 1
</div>
</>
}
/>
</div>
</div>
const GroupTooltipIcon1 = ({
width = "48",
height = "48",
classes = "stroke-white",
}) => {
return (
<svg
className={classes}
style={{ width, height }}
viewBox={`0 0 48 48`}
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_206_1350)">
<path d="M31.6027 22.5623L34.1509 20.0644C38.9389 22.0715 42.8398 19.6492 42.8398 19.6492C48.6345 14.1502 46.9798 6.58116 46.9798 6.58116L40.1784 13.3197C40.1784 13.3197 37.9889 13.3197 36.2775 11.8977C34.8555 10.1801 34.8555 7.99681 34.8555 7.99681L41.6003 1.20169C41.6003 1.20169 34.0313 -0.453049 28.5323 5.34168C28.5323 5.34168 26.11 9.24259 28.117 14.0306L23.373 18.869"
stroke="white"
strokeLinecap="round"
strokeLinejoin="round"/>
</g>
<defs>
<clipPath id="clip0_206_1350">
<rect width="48" height="48" fill="white"/>
</clipPath>
</defs>
</svg>
);
};
export default React.memo(GroupTooltipIcon1);
I have to be able to center the svg component within this grid tailwind, can you help me?
Thank you for help
I found a solution by doing it this way. I hope it will be useful to someone
<div className="mt-[75px] grid grid-cols-2 gap-2 items-start">
<div>
<div className="iconInsideTooltip flex justify-center">
<GroupTooltipIcon1 width="48px" height="48px" />
</div>
<TextSection
customClasses={{ "text-center p-5": "p5" }}
p5={
<>
<div>
Testo 1
</div>
</>
}
/>
</div>
</div>
I'm using FontAwesome's react-fontawesome like so:
<FontAwesomeIcon icon={faCaretUp} color="gray" size="lg" />
but the resulting icon has way too much space around it.
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-up" class="svg-inline--fa fa-caret-up fa-w-10 fa-lg " role="img" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512" color="gray" style="margin: 0px auto;">
<path fill="currentColor" d="M288.662 352H31.338c-17.818 0-26.741-21.543-
14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662
128.662c12.6 12.599 3.676 34.142-14.142 34.142z"></path>
</svg>
Been trying to fix it for a while but nothing works, am I doing something wrong?
How would I vertically align these SVG images to vertically match the buttons I'm making?
<button style=
"width:100px;height:100px;border-radius:50%;background-color:white;border-color:#0F75BC;">
Step 1<br>
.</button> <svg height="50" viewbox="0 0 512 512" width="50" xmlns=
"http://www.w3.org/2000/svg">
<path d=
"M 64.00,416.00l 96.00,96.00l 256.00-256.00L 160.00,0.00L 64.00,96.00l 160.00,160.00L 64.00,416.00z">
</path></svg> <button style=
"width:100px;height:100px;border-radius:50%;background-color:white;border-color:#0F75BC;">
Step Two<br>
.</button> <svg height="50" viewbox="0 0 512 512" width="50" xmlns=
"http://www.w3.org/2000/svg">
<path d=
"M 64.00,416.00l 96.00,96.00l 256.00-256.00L 160.00,0.00L 64.00,96.00l 160.00,160.00L 64.00,416.00z">
</path></svg> <button style=
"width:100px;height:100px;border-radius:50%;background-color:white;border-color:#0F75BC;">
Step 3<br>
.</button>
jsfiddle
UPDATED 7 May 2018
added display: flex option
You can style both button and svg like this:
button,
svg {
display: inline-block;
vertical-align: middle;
}
button,
svg {
display: inline-block;
vertical-align: middle;
}
<h2>Using display inline block and vertical align middle</h2>
<button style="width:100px;height:100px;border-radius:50%;background-color:white;border-color:#0F75BC;">
Step 1<br>.
</button>
<svg height="50" viewbox="0 0 512 512" width="50" xmlns="http://www.w3.org/2000/svg">
<path d=
"M 64.00,416.00l 96.00,96.00l 256.00-256.00L 160.00,0.00L 64.00,96.00l 160.00,160.00L 64.00,416.00z">
</path>
</svg>
<button style="width:100px;height:100px;border-radius:50%;background-color:white;border-color:#0F75BC;">
Step Two<br>.
</button>
<svg height="50" viewbox="0 0 512 512" width="50" xmlns="http://www.w3.org/2000/svg">
<path d=
"M 64.00,416.00l 96.00,96.00l 256.00-256.00L 160.00,0.00L 64.00,96.00l 160.00,160.00L 64.00,416.00z">
</path>
</svg>
<button style="width:100px;height:100px;border-radius:50%;background-color:white;border-color:#0F75BC;">
Step 3<br>.
</button>
Hope this helps.
Display Flex
You can also achieve this by using display: flex for browser that is supported. But need an extra wrapper for the buttons and the svg.
#supports (display: flex) {
.steps {
display: flex;
flex-direction: row;
align-items: center;
}
}
<h2>Using display flex</h2>
<div class="steps">
<button style="width:100px;height:100px;border-radius:50%;background-color:white;border-color:#0F75BC;">
Step 1<br>.
</button>
<svg height="50" viewbox="0 0 512 512" width="50" xmlns="http://www.w3.org/2000/svg">
<path d=
"M 64.00,416.00l 96.00,96.00l 256.00-256.00L 160.00,0.00L 64.00,96.00l 160.00,160.00L 64.00,416.00z">
</path>
</svg>
<button style="width:100px;height:100px;border-radius:50%;background-color:white;border-color:#0F75BC;">
Step Two<br>.
</button>
<svg height="50" viewbox="0 0 512 512" width="50" xmlns="http://www.w3.org/2000/svg">
<path d=
"M 64.00,416.00l 96.00,96.00l 256.00-256.00L 160.00,0.00L 64.00,96.00l 160.00,160.00L 64.00,416.00z">
</path>
</svg>
<button style="width:100px;height:100px;border-radius:50%;background-color:white;border-color:#0F75BC;">
Step 3<br>.
</button>
</div>
I have a menu in css whose icons are svg. When you mouse over the button, change the color of the icon via a CSS transition. Interestingly, not all the buttons work. It depends on the content of the href. Why?
This works:
<li class="navButton">
<a id="home" href="home.php">
<span class="icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="30px" height="30px"
viewBox="0 0 512 512" enable-background="new 0 0 512 512"
xml:space="preserve">
<path class="icon_path" fill="white"
d="M256,69.972L50,275.815h42.507v166.213h326.985V275.815H462L256,69.972z
M374.492,397.028h-73.767v-86.495 h-89.451v86.495h-73.768V251.99
L256,133.587l118.492,118.402V397.028z"/>
</svg>
</span>
<span class="text">Home</span>
</a>
</li>
This doesn't work:
<li class="navButton">
<a id="projects" href="projects.php">
<span class="icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="30px" height="30px"
viewBox="0 0 512 512" enable-background="new 0 0 512 512"
xml:space="preserve">
<path class="icon_path" fill="white"
d="M436.631,207.445v163.681L279.232,462V298.319L436.631,207.445z
M256,258.08l180.201-104.04L256,50 L75.799,154.041L256,258.08z
M232.768,298.319L75.369,207.445v163.681L232.768,462V298.319z"/>
</svg>
</span>
<span class="text">Projects</span>
</a>
</li>
If I change the href content, eg projects2.php works. Too crazy..