React-Disable-Icon

An icon manager to visually disable icons

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)
}
*/