Welcome to ClassFunc. We love to use new technology!
Demo link: https://duongdam.github.io/react-antd-button-svg-icons/
Resource: https://github.com/duongdam/react-antd-button-svg-icons
- Add new props turn off animated: offAnimated : default "true"
yarn add react-antd-button-svg-icons
npm install --save react-antd-button-svg-icons
import { CLFButtonSVG } from "react-antd-button-svg-icons";
import React from "react";
import { ReactComponent as TestSVG } from "./test.svg";
import { CLFButtonSVG } from "react-antd-button-svg-icons";
import { message } from "antd";
import "antd/lib/message/style/css";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles(theme => ({
antBtn: {
background: `red !important`,
borderColor: `red !important`,
// textAlign: "left",
textAlign: "center",
color: "#fff",
textTransform: "uppercase",
display: "flex",
"& svg": {
fill: "red"
},
"& .ant-btn-block": {
width: "97%"
},
"& .clf-icon-Btn": {
left: "1px !important"
}
}
}));
const App = () => {
const classes = useStyles();
return (
<div style={{
width: "100%",
display: "grid",
maxWidth: "800px",
// justifyContent: "center",
// alignItems: "center",
padding: "100px 50px",
margin: "100px auto"
}}>
With no icon
<CLFButtonSVG
name={"ClassFunc"}
size={"default"}
onClick={() => {
message.success("Hello CLFButtonSVG", 0.2);
}}
onKeyClick={() => {
message.success("This is key + click", 0.2);
}}
width={"150px"}
/>
Default
<CLFButtonSVG
name={"ClassFunc"}
size={"default"}
iconComponent={<TestSVG/>}
onClick={() => {
message.success("Hello CLFButtonSVG", 0.2);
}}
onKeyClick={() => {
message.success("This is key + click", 0.2);
}}
disable={false}
width={"150px"}
/>
Icon revert right
<CLFButtonSVG
name={"ClassFunc"}
size={"default"}
iconComponent={<TestSVG/>}
iconRevert={true}
onClick={() => {
message.success("Hello CLFButtonSVG", 0.2);
}}
onKeyClick={() => {
message.success("This is key + click", 0.2);
}}
disable={false}
width={"150px"}
background={"#1790FF"}
borderColor={"#1790FF"}
/>
Full Width
<CLFButtonSVG
name={"Full Width"}
size={"default"}
iconComponent={<TestSVG/>}
onClick={() => {
message.success("Hello CLFButtonSVG", 0.2);
}}
onKeyClick={() => {
message.success("This is key + click", 0.2);
}}
disable={false}
block={true}
margin={"5px"}
/>
With Tooltip
<CLFButtonSVG
name={"With tooltip"}
size={"default"}
iconComponent={<TestSVG/>}
onClick={() => {
message.success("Hello CLFButtonSVG", 0.2);
}}
onKeyClick={() => {
message.success("This is key + click", 0.2);
}}
disable={false}
block={true}
margin={"5px"}
enableTooltip={true}
tooltipPlacement={"right"}
/>
Loading
<CLFButtonSVG
name={"Full Width Loading"}
size={"default"}
iconComponent={<TestSVG/>}
disable={false}
loading={true}
block={true}
/>
Disabled
<CLFButtonSVG
name={"Full Width Disable"}
size={"default"}
iconComponent={<TestSVG/>}
disable={true}
loading={false}
block={true}
enableTooltip={true}
tooltipPlacement={"right"}
/>
Disabled custom with makesTheme
<CLFButtonSVG
name={"Full Width Disable"}
size={"default"}
iconComponent={<TestSVG/>}
disable={true}
loading={false}
block={true}
enableTooltip={true}
tooltipPlacement={"right"}
className={classes.antBtn}
/>
</div>
);
};
export default App;
id: PropType.oneOfType([PropType.string, PropType.number]),
iconComponent: PropType.element,
name: PropType.oneOfType([PropType.string, PropType.element, PropType.elementType]),
onClick: PropType.func,
size: PropType.string,
disable: PropType.bool,
loading: PropType.bool,
width: PropType.oneOfType([PropType.number, PropType.string]),
height: PropType.oneOfType([PropType.number, PropType.string]),
key: PropType.string,
margin: PropType.string,
padding: PropType.string,
block: PropType.bool,
className: PropType.string,
minWidth: PropType.oneOfType([PropType.number, PropType.string]),
minHeight: PropType.oneOfType([PropType.number, PropType.string]),
color: PropType.string,
borderRadius: PropType.oneOfType([PropType.string]),
background: PropType.string,
borderColor: PropType.string,
iconRevert: PropType.bool,
onKeyClick: PropType.func,
fontWeight: PropType.oneOfType([PropType.string, PropType.number]),
fontSize: PropType.oneOfType([PropType.string]),
tooltipPlacement: PropType.oneOf([
"topLeft",
"top",
"topRight",
"leftTop",
"left",
"leftBottom",
"rightTop",
"right",
"rightBottom",
"bottomLeft",
"bottom",
"bottomRight"]),
tooltipBackground: PropType.string,
enableTooltip: PropType.bool,
offAnimated: PropType.bool
id: uuidv4(),
iconComponent: null,
name: "ClassFunc Button",
onClick: null,
size: "default",
disable: false,
loading: false,
key: null,
margin: "5px",
padding: "unset",
block: false,
className: null,
width: null,
height: "auto",
minWidth: "125px",
minHeight: "35px",
fontWeight: 700,
color: "#FFF",
borderRadius: "25px",
background: "#1790FF",
borderColor: "#1790FF",
iconRevert: false,
onKeyClick: null,
fontSize: "1.2rem",
tooltipPlacement: "top",
tooltipBackground: "#1790FF",
enableTooltip: false,
offAnimated: true
MIT © duongdam