Demo

Live demo and sandbox

Installation

React-Disable-Icon is available as an npm package.

// with npm
npm install react-disable-icon

Usage

import React, { useState } from "react"
import IconSwitch from "react-disable-icon"

function App() {
const [disabled, setDisabled] = useState(true)

return (
	<IconSwitch disabled = {disabled} Icon = {<img src = "/react.svg" width="80" height="80"/>} onClick = {()=>setDisabled(!disabled)}/>
)}

Props

| Prop Names| Type |Required? | Default | Description| |--|--|--|--|--| disabled | bool | required | false | Whether icon should have a slash onClick|function|required|N/A|Function called when icon is clicked Icon|Rendered React Component| required|N/A| The icon disabledColor| string| optional|#000|Default color of slash className| string| optional| N\A|Class name applied to SVG Slash

Examples

import React, { useState } from "react"
import IconSwitch from "react-disable-icon"

function App() {
const [disabled, setDisabled] = useState(true)
return (
	<IconSwitch disabled = {disabled} onClick = {()=>setDisabled(!disabled)} Icon = {
		<svg viewbox = "0 0 45 45" width = "44" height = "44">
			<circle cx="22" cy="22" r="21" stroke="black" stroke-width="1" fill="red" />
		</svg> }/>
)}

import React, { useState } from "react"
import IconSwitch from "react-disable-icon"

function App() {
const [disabled, setDisabled] = useState(true)
return (
	<IconSwitch disabled = {disabled} Icon = {
		<img src = "/react.svg" fill = {disabled ? "rgb(115,115,115)" : "#61dafb" } className ={\`reactIcon\${disabled ? "" : " active"}\`} width="80" height="80" style = {{cursor:"pointer"}}/>
	} disabledColor="rgb(115,115,115)" onClick = {()=>setDisabled(!disabled)}/>
)}

/*
CSS
.reactIcon:hover, .reactIcon:hover + svg {
fill:rgb(90, 90, 90)
}

.reactIcon.active:hover{
fill:rgb(99, 183, 206)
}
*/