react-fontawesome - svg much bigger than path

react-fontawesome - svg much bigger than path - css

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?

Related

Mermaid class diagram hide/conceal certain nodes and links/edgePaths

I want to create a mermaid class diagram in a github .md file where in I can hide/conceal certain nodes and paths/links from that node using CSS.
What I want?
I want the following where the node for the Zebra is concealed and the arrow path/link from it is also concealed. But the sibling Lion class and it's link is 100% opacity.
What I have tried:
I was able to hide nodes using the cssClass feature as below:
// CSS
<style>
.conceal {
opacity: 20% !important;
}
</style>
// ```mermaid
classDiagram
Animal <|--|> Zebra
Animal <|--|> Lion
cssClass "Zebra" conceal
// ```
This produces the following chart where Zebra is concealed while lion is not
However the path from the Zebra is still 100% opacity.
To fix the opacity of the edgePath I tried the following:
.edgePaths:has(~g>g.conceal) {
opacity: 20% !important;
}
// CSS
<style>
.conceal {
opacity: 20% !important;
}
.edgePaths:has(~g>g.conceal) {
opacity: 20% !important;
}
</style>
//```mermaid
classDiagram
Animal <|--|> Zebra
Animal <|--|> Lion
cssClass "Zebra" conceal
//```
Note: the has css selector does not work in Firefox yet.
However, this made both paths from Animal have the lowered opacity as can be seen (in Chrome):
Here is the SVG as example:
<svg aria-labelledby="chart-title-mermaid-1671893404869 chart-desc-mermaid-1671893404869" role="img" viewBox="0.000003814697265625 0.00000286102294921875 170.4431915283203 195.19317626953125" style="max-width: 170.4431915283203px;" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="100%" id="mermaid-1671893404869">
<style>
.conceal {
opacity: 20% !important;
}
.edgePaths:has(~g>g.conceal) {
opacity: 20% !important;
}
</style>
<title id="chart-title-mermaid-1671893404869">
</title>
<desc id="chart-desc-mermaid-1671893404869">
</desc>
<style>
#mermaid-1671893404869 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-1671893404869 .error-icon{fill:#552222;}#mermaid-1671893404869 .error-text{fill:#552222;stroke:#552222;}#mermaid-1671893404869 .edge-thickness-normal{stroke-width:2px;}#mermaid-1671893404869 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-1671893404869 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-1671893404869 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-1671893404869 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-1671893404869 .marker{fill:#333333;stroke:#333333;}#mermaid-1671893404869 .marker.cross{stroke:#333333;}#mermaid-1671893404869 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-1671893404869 g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-1671893404869 g.classGroup text .title{font-weight:bolder;}#mermaid-1671893404869 .nodeLabel,#mermaid-1671893404869 .edgeLabel{color:#131300;}#mermaid-1671893404869 .edgeLabel .label rect{fill:#ECECFF;}#mermaid-1671893404869 .label text{fill:#131300;}#mermaid-1671893404869 .edgeLabel .label span{background:#ECECFF;}#mermaid-1671893404869 .classTitle{font-weight:bolder;}#mermaid-1671893404869 .node rect,#mermaid-1671893404869 .node circle,#mermaid-1671893404869 .node ellipse,#mermaid-1671893404869 .node polygon,#mermaid-1671893404869 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-1671893404869 .divider{stroke:#9370DB;stroke:1;}#mermaid-1671893404869 g.clickable{cursor:pointer;}#mermaid-1671893404869 g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-1671893404869 g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-1671893404869 .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-1671893404869 .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-1671893404869 .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-1671893404869 .dashed-line{stroke-dasharray:3;}#mermaid-1671893404869 #compositionStart,#mermaid-1671893404869 .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-1671893404869 #compositionEnd,#mermaid-1671893404869 .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-1671893404869 #dependencyStart,#mermaid-1671893404869 .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-1671893404869 #dependencyStart,#mermaid-1671893404869 .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-1671893404869 #extensionStart,#mermaid-1671893404869 .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-1671893404869 #extensionEnd,#mermaid-1671893404869 .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-1671893404869 #aggregationStart,#mermaid-1671893404869 .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-1671893404869 #aggregationEnd,#mermaid-1671893404869 .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-1671893404869 #lollipopStart,#mermaid-1671893404869 .lollipop{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-1671893404869 #lollipopEnd,#mermaid-1671893404869 .lollipop{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-1671893404869 .edgeTerminals{font-size:11px;}#mermaid-1671893404869 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
</style>
<g>
<defs>
<marker orient="auto" markerHeight="240" markerWidth="190" refY="7" refX="0" class="marker aggregation classDiagram" id="classDiagram-aggregationStart">
<path d="M 18,7 L9,13 L1,7 L9,1 Z">
</path>
</marker>
</defs>
<defs>
<marker orient="auto" markerHeight="28" markerWidth="20" refY="7" refX="19" class="marker aggregation classDiagram" id="classDiagram-aggregationEnd">
<path d="M 18,7 L9,13 L1,7 L9,1 Z">
</path>
</marker>
</defs>
<defs>
<marker orient="auto" markerHeight="240" markerWidth="190" refY="7" refX="0" class="marker extension classDiagram" id="classDiagram-extensionStart">
<path d="M 1,7 L18,13 V 1 Z">
</path>
</marker>
</defs>
<defs>
<marker orient="auto" markerHeight="28" markerWidth="20" refY="7" refX="19" class="marker extension classDiagram" id="classDiagram-extensionEnd">
<path d="M 1,1 V 13 L18,7 Z">
</path>
</marker>
</defs>
<defs>
<marker orient="auto" markerHeight="240" markerWidth="190" refY="7" refX="0" class="marker composition classDiagram" id="classDiagram-compositionStart">
<path d="M 18,7 L9,13 L1,7 L9,1 Z">
</path>
</marker>
</defs>
<defs>
<marker orient="auto" markerHeight="28" markerWidth="20" refY="7" refX="19" class="marker composition classDiagram" id="classDiagram-compositionEnd">
<path d="M 18,7 L9,13 L1,7 L9,1 Z">
</path>
</marker>
</defs>
<defs>
<marker orient="auto" markerHeight="240" markerWidth="190" refY="7" refX="0" class="marker dependency classDiagram" id="classDiagram-dependencyStart">
<path d="M 5,7 L9,13 L1,7 L9,1 Z">
</path>
</marker>
</defs>
<defs>
<marker orient="auto" markerHeight="28" markerWidth="20" refY="7" refX="19" class="marker dependency classDiagram" id="classDiagram-dependencyEnd">
<path d="M 18,7 L9,13 L14,7 L9,1 Z">
</path>
</marker>
</defs>
<defs>
<marker orient="auto" markerHeight="240" markerWidth="190" refY="7" refX="0" class="marker lollipop classDiagram" id="classDiagram-lollipopStart">
<circle r="6" cy="7" cx="6" fill="white" stroke="black">
</circle>
</marker>
</defs>
<g class="root">
<g class="clusters">
</g>
<g class="edgePaths">
<path marker-end="url(#classDiagram-extensionEnd)" marker-start="url(#classDiagram-extensionStart)" style="fill:none" class="edge-pattern-solid relation" id="id1" d="M58.962245118973726,72.59658813476562L55.24552626440763,76.7632548014323C51.528807409841534,80.92992146809895,44.09536970070934,89.2632548014323,40.378650846143245,97.59658813476562C36.66193199157715,105.92992146809895,36.66193199157715,114.2632548014323,36.66193199157715,118.42992146809895L36.66193199157715,122.59658813476562">
</path>
<path marker-end="url(#classDiagram-extensionEnd)" marker-start="url(#classDiagram-extensionStart)" style="fill:none" class="edge-pattern-solid relation" id="id2" d="M116.58321081364346,72.59658813476562L120.29992966820957,76.7632548014323C124.01664852277565,80.92992146809895,131.45008623190785,89.2632548014323,135.16680508647394,97.59658813476562C138.88352394104004,105.92992146809895,138.88352394104004,114.2632548014323,138.88352394104004,118.42992146809895L138.88352394104004,122.59658813476562">
</path>
</g>
<g class="edgeLabels">
<g class="edgeLabel">
<g transform="translate(0, 0)" class="label">
<foreignObject height="0" width="0">
<div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">
<span class="edgeLabel">
</span>
</div>
</foreignObject>
</g>
</g>
<g class="edgeLabel">
<g transform="translate(0, 0)" class="label">
<foreignObject height="0" width="0">
<div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">
<span class="edgeLabel">
</span>
</div>
</foreignObject>
</g>
</g>
</g>
<g class="nodes">
<g transform="translate(87.7727279663086, 40.29829406738281)" id="classid-Animal-0" class="node default">
<rect height="64.59659194946289" width="66.34659194946289" y="-32.298295974731445" x="-33.173295974731445" class="outer title-state">
</rect>
<line y2="5.298295974731445" y1="5.298295974731445" x2="33.173295974731445" x1="-33.173295974731445" class="divider">
</line>
<line y2="21.298295974731445" y1="21.298295974731445" x2="33.173295974731445" x1="-33.173295974731445" class="divider">
</line>
<g class="label">
<foreignObject height="0" width="0">
<div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">
<span class="nodeLabel">
</span>
</div>
</foreignObject>
<foreignObject transform="translate( -25.673295974731445, -24.798295974731445)" height="25.59659194946289" width="51.34659194946289" class="classTitle">
<div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">
<span class="nodeLabel">
Animal
</span>
</div>
</foreignObject>
</g>
</g>
<g transform="translate(36.66193199157715, 154.89488220214844)" id="classid-Zebra-1" class="node default conceal">
<rect height="64.59659194946289" width="57.3238639831543" y="-32.298295974731445" x="-28.66193199157715" class="outer title-state">
</rect>
<line y2="5.298295974731445" y1="5.298295974731445" x2="28.66193199157715" x1="-28.66193199157715" class="divider">
</line>
<line y2="21.298295974731445" y1="21.298295974731445" x2="28.66193199157715" x1="-28.66193199157715" class="divider">
</line>
<g class="label">
<foreignObject height="0" width="0">
<div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">
<span class="nodeLabel">
</span>
</div>
</foreignObject>
<foreignObject transform="translate( -21.16193199157715, -24.798295974731445)" height="25.59659194946289" width="42.3238639831543" class="classTitle">
<div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">
<span class="nodeLabel">
Zebra
</span>
</div>
</foreignObject>
</g>
</g>
<g transform="translate(138.88352394104004, 154.89488220214844)" id="classid-Lion-2" class="node default">
<rect height="64.59659194946289" width="47.119319915771484" y="-32.298295974731445" x="-23.559659957885742" class="outer title-state">
</rect>
<line y2="5.298295974731445" y1="5.298295974731445" x2="23.559659957885742" x1="-23.559659957885742" class="divider">
</line>
<line y2="21.298295974731445" y1="21.298295974731445" x2="23.559659957885742" x1="-23.559659957885742" class="divider">
</line>
<g class="label">
<foreignObject height="0" width="0">
<div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">
<span class="nodeLabel">
</span>
</div>
</foreignObject>
<foreignObject transform="translate( -16.059659957885742, -24.798295974731445)" height="25.59659194946289" width="32.119319915771484" class="classTitle">
<div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">
<span class="nodeLabel">
Lion
</span>
</div>
</foreignObject>
</g>
</g>
</g>
</g>
</g>
</svg>
Question:
Is there a way using CSS selectors to apply the reduced opacity to only one of the edgePaths?

How can i replace the navigation icons of react-material-ui datepicker?

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.

Make SVG loaded from file overflow:visible outside <object>

Is there a simple way of having an SVG loaded from external file and overflowing?
I tried this:
<html>
<body>
<div style="width:100px;height:30px;">
<svg version="1.1"
baseProfile="full"
width="100%" height="100%"
viewBox="0 0 300 200"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
overflow="visible">
<rect width="100%" height="100%" fill="black" />
<circle cx="150" cy="100" r="120" fill="blue" />
</svg>
</div>
<div style="width:100px;height:30px;overflow:visible;">
<object style='width:100%;height:100%;overflow:visible;' type='image/svg+xml' data='simple.svg'></object>
</div>
</body>
</html>
where simple.svg is the same as the inline <svg> tag. As seen in this
image:
or in this https://jsfiddle.net/bhLk69wd/1/, the SVG is clipped by <object>. Previously, I tried <img> and <embed> and the SVG was also clipped.

Whats the best way to vertically align SVG with buttons?

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>

CSS svg color transition error in Chrome

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..

Develop Reference

r css asp.net wordpress firebase qt symfony nginx http apache-flex

react-fontawesome - svg much bigger than path - css

Related

Mermaid class diagram hide/conceal certain nodes and links/edgePaths

How can i replace the navigation icons of react-material-ui datepicker?

Make SVG loaded from file overflow:visible outside <object>

Whats the best way to vertically align SVG with buttons?

CSS svg color transition error in Chrome

Categories

Resources