As you can see, I have a Checkbox element, I have an svg file and I want to place it in this checkbox. I don't know how to do this, I searched the internet but couldn't find it. It is not mentioned in the document, unfortunately, can you help?
https://codesandbox.io/s/h4eb1
As an example, I can show the required field at the bottom.
Following example shows how to customize and replace check box with SVG. Please note that this example is not using Antd check box, still you can get the same results
index.css
.my-image:hover {
cursor: pointer;
}
input[type="checkbox"]:checked +.customcheckbox {
fill: red;
}
Demo.js
import React from 'react';
import 'antd/dist/antd.css';
import './index.css';
const Demo = () => {
function onChange(e) {
console.log(`checked = ${e.target.checked}`);
}
return (
<>
<label>
<input
type="checkbox"
onChange={onChange}
name=""
value=""
style={{ display: 'none' }}
/>
<svg
className="customcheckbox"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid"
width="20"
height="20"
viewBox="0 0 25 28"
>
<path
d="M8 0v2h8v-2h-8zm0 24v-2h8v2h-8zm10-24h6v6h-2v-4h-4v-2zm-18 8h2v8h-2v-8zm0-2v-6h6v2h-4v4h-2zm24 10h-2v-8h2v8zm0 2v6h-6v-2h4v-4h2zm-18 6h-6v-6h2v4h4v2zm12-18h-12v12h12v-12z"
class="cls-1"
/>
</svg>
</label>
</>
);};
export default Demo;
If you want to customize antd checkbox icon (not SVG), use can customise the antd css classes (inspect the checkbox in browser to check the classes).
This question already has answers here:
Outlining and partially filling an SVG Shape
(3 answers)
Fill only Half a star with SVG
(4 answers)
Closed last year.
I have an Hour Glass shaped svg inside of a react component. What is the best way to partially fill the hourglass? Is it in the svg code? Or should this be done with CSS (styled-components)?
export default function HourGlass({ percent }) {
return (
<Container>
<Glass
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
x="0px"
y="0px"
>
<title>hourglass</title>
<g data-name="Layer 51">
<path d="M20,16.168v.152a10.019,10.019,0,0,1,6,9.168v4a1,1,0,0,1-1,1H7a1,1,0,0,1-1-1v-4a10.019,10.019,0,0,1,6-9.168v-.153A10.019,10.019,0,0,1,6,7V3A1,1,0,0,1,7,2H25a1,1,0,0,1,1,1V7A10.021,10.021,0,0,1,20,16.168Z"></path>
</g>
</Glass>
</Container>
);
}
const Glass = styled.svg`
width: 4.2em;
fill: green;
`;
This is the element I'm trying to apply the spin anim to:
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 inline hover:animate-spin" fill="none" viewBox="0 0 24 24" stroke="currentColor" >
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} ... />
</svg>
As I hover over the element nothing happens. If I remove the hover pseudo class it works.
You have to generate hover variant. As the documentation says:
By default, only responsive variants are generated for animation utilities.
You can control which variants are generated for the animation utilities by modifying the animation property in the variants section of your tailwind.config.js file.
For example, this config will also generate hover and focus variants:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
animation: ['hover', 'focus'],
}
}
}
I wanted to display an svg icon and a text in a same line in React and Next.js. Now I have found how to do it. Though I still don't know how to control the size of the svg icon in the context. I want the svg icon to be same size as each character of the text.
I put the browser display here.
And I put my code bellow, please point out what is wrong about my code.
//mysvg.js
import styles from '../styles/svg.module.css'
export function CircleBottomIcon(props) {
return (<span class={styles['svg-image']}>
<svg
width="30"
height="30"
viewBox="0 0 30 30"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<title>circle-bottom</title>
<path
d="M27.5 15c0 6.893-5.608 12.5-12.5 12.5-6.893 0-12.5-5.608-12.5-12.5C2.5 8.107 8.108 2.5 15 2.5c6.893 0 12.5 5.608 12.5 12.5zm2.5 0c0-8.284-6.716-15-15-15C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15 8.284 0 15-6.716 15-15zm-15 2.5l-5.625-5.625-1.875 1.91L15 21.25l7.5-7.466-1.875-1.91L15 17.5z"
fill-rule="evenodd"
/>
</svg></span>
);
}
//index.js
import {CircleBottomIcon} from '../components/mysvg'
export default function Home() {
return (
<span>
1234<CircleBottomIcon></CircleBottomIcon>567890
</span>
)
}
//svg.module.css
.svg-image {
display: inline-block;
width: 16px;
height: 16px;
}
I'd suggest you keep constant values for viewbox param and accept props for height and width. Add a default values for these as 30 and 30. Part of code looks like:
const { height, width } = props;
<svg
width={width}
height={height}
viewBox="0 0 30 30"
...
Then you can use any values for width and height when you use the svg component.
your .svg-image selector should target the svg element:
.svg-image {
display: inline-block;
svg {
width: 16px;
height: 16px;
}
}
I using vue-simple-svg package and Vue.
I sending icon and color to component:
<IconComponent name="comment.svg" color="#ffffff" />
In IconComponent I get props:
<simple-svg
:src="image"
fill-class-name="fill-to-change"
:fill="color"
stroke-class-name="stroke-to-change"
:stroke="color"
custom-id="my-id"
custom-class-name="my-class"
/>
props: {
image: {
type: String,
required: true,
},
color: {
type: String,
required: true,
},
},
But color not change to #ffffff.
So I trying change color using CSS:
I have structure svg file with color:
svg => g => g
I have class .my-class, and I write code:
.my-class g g {
fill: #ffffff;
stroke: #ffffff;
}
I tryimg using:
.fill-to-change {
fill: #ffffff;
}
.stroke-to-change {
stroke: #ffffff;
}
but color not change to white.
File SVG:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 59.1 (101010) - https://sketch.com -->
<title>afb3c770-9343-4219-b68b-48905c19ec63#1.00x</title>
<desc>Created with sketchtool.</desc>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.6">
<g id="Icons-/-Interfaces-/-user-plus" fill="#000000">
<path d="M17,19 L17,16.5 C17,16.2238576 17.2238576,16 17.5,16 C17.7761424,16 18,16.2238576 18,16.5 L18,19 L20.5,19 C20.7761424,19 21,19.2238576 21,19.5 C21,19.7761424 20.7761424,20 20.5,20 L18,20 L18,22.5 C18,22.7761424 17.7761424,23 17.5,23 C17.2238576,23 17,22.7761424 17,22.5 L17,20 L14.5,20 C14.2238576,20 14,19.7761424 14,19.5 C14,19.2238576 14.2238576,19 14.5,19 L17,19 Z M14.0425135,13.5651442 C13.4188979,13.8445863 12.7275984,14 12,14 C11.2738711,14 10.5838946,13.8452135 9.96126583,13.5668358 L5.87929558,15.4222768 C5.34380416,15.665682 5,16.1996113 5,16.7878265 L5,17.5 C5,18.3284271 5.67157288,19 6.5,19 L11.5,19 C11.7761424,19 12,19.2238576 12,19.5 C12,19.7761424 11.7761424,20 11.5,20 L6.5,20 C5.11928813,20 4,18.8807119 4,17.5 L4,16.7878265 C4,15.8074678 4.57300693,14.9175857 5.46549264,14.5119103 L8.92215823,12.9406987 C7.75209123,12.0255364 7,10.6005984 7,9 C7,6.23857625 9.23857625,4 12,4 C14.7614237,4 17,6.23857625 17,9 C17,10.5929224 16.2551051,12.0118652 15.0946468,12.927497 L17.6966094,14.0402775 C17.9505071,14.1488619 18.0683068,14.4427117 17.9597225,14.6966094 C17.8511381,14.9505071 17.5572883,15.0683068 17.3033906,14.9597225 L14.0425135,13.5651442 L14.0425135,13.5651442 Z M12,13 C14.209139,13 16,11.209139 16,9 C16,6.790861 14.209139,5 12,5 C9.790861,5 8,6.790861 8,9 C8,11.209139 9.790861,13 12,13 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
I have other solution. I added to scss file filter for example:
&__image {
filter: invert(35%) sepia(36%) saturate(7009%) hue-rotate(2deg) brightness(104%) contrast(88%);
}
To convert the color to the filter format (for example: #ef4f10) use CSS filter generator to convert from black to target hex color.
The best effest is when default color in SVG file is black: fill="#000000".
Use CSS On SVG
svg{
fill: #fff;
stroke: #fff;
}
Hope it will work for you
add !important at the end of style.
eg
.class g g{
fill:#fff!important;
}
#michal
Remove 'fill=""' property from all tag inside svg tag, then you will get result.
The best thing you can do is to bind to attribute
<path v-bind:fill="this.skinColorContent"
export default {
data() {
return {
skinColorContent: 'red',
}
},
}