feat: add feature to add custom icon

src/components/Editor.js

@@ -14,7 +14,8 @@ const defaultSettings = {
 	icon: { 'label': 'react', 'value': 'react' },
 	devIconOptions: {},
 	font: 'font-sans',
-	theme: 'modern'
+	theme: 'modern',
+	customIcon: ''
 
 };
 
@@ -30,6 +31,7 @@ class Editor extends React.Component {
 	componentDidMount() {
 		console.log("Mount")
 		fetch(devIconsUrl).then(r => r.json()).then(data => {
+			data.push({ name: 'custom' })
 			this.setState({ devIconOptions: data.map(item => ({ 'value': item.name, 'label': item.name })) })
 		})
 	}
@@ -51,6 +53,24 @@ class Editor extends React.Component {
 	);
 
 
+	// customOption = props => {
+	// 	const { data, innerRef, innerProps } = props;
+
+	// 	return data.name === 'custom' ? (
+	// 		<div ref={innerRef} {...innerProps}>
+	// 			<input type="file"
+	// 				className="text-xl cursor-pointer mb-2 bg-white rounded border"
+	// 				onChange={(e) => this.setState({ 'customIcon': URL.createObjectURL(e.target.files[0]) })}
+	// 			/>
+	// 		</div>
+	// 	) : (
+	// 		<components.Option {...props} />
+	// 	);
+
+
+	// };
+
+
 	render() {
 		return (
 			<div className="flex md:flex-row flex-col bg-gray-50 ">
@@ -136,6 +156,17 @@ class Editor extends React.Component {
 						/>
 					</div>
 
+					{this.state.icon.label === 'custom' ?
+						<div className="flex items-center justify-center m-2">
+							<input type="file"
+								className="text-lg cursor-pointer bg-white rounded border"
+								onChange={(e) => this.setState({ 'customIcon': URL.createObjectURL(e.target.files[0]) })}
+							/>
+						</div>
+						:
+						<div></div>
+					}
+
 					<div className="flex">
 
 

src/components/Themes/BasicTheme.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 
 const BasicTheme = ({ config }) => {
-    const { title, bgColor, pattern, author, icon, font } = config;
+    const { title, bgColor, pattern, author, icon, font, customIcon } = config;
 
     return (
         <div className="p-4 bg-white border">
@@ -19,7 +19,18 @@ const BasicTheme = ({ config }) => {
                     </div>
 
                     <div className=" flex mx-4 mt-10 p-4 rounded-xl items-center bg-white">
-                        <i className={`devicon-${icon.value}-plain dev-icon text-4xl`}></i>
+                        {
+                            customIcon ?
+                                <div className="w-12 h-12  ">
+                                    <img src={customIcon} alt="img" className="rounded-full bg-white p-1 border-white" />
+                                </div>
+                                :
+                                <div className=" rounded-full p-6 w-32 h-32 bg-white mx-auto items-center justify-center flex">
+                                    <i className={`devicon-${icon.value}-plain  p-4 dev-icon text-7xl`}></i>
+                                </div>
+                        }
+
+
                         <h2 className="text-xl ml-auto mr-2 font-semibold">{author}</h2>
 
                     </div>

src/components/Themes/ModernTheme.js

@@ -3,7 +3,7 @@ import React from 'react';
 
 const ModernTheme = ({ config }) => {
 
-    const { title, bgColor, pattern, author, icon, font } = config;
+    const { title, bgColor, pattern, author, icon, font, customIcon } = config;
 
     return (
         <div className="p-4 bg-white border">
@@ -11,9 +11,18 @@ const ModernTheme = ({ config }) => {
                 <div className={`  h-full rounded-xl  p-4 text-gray-800 flex  items-center ${pattern} `}
                     style={{ backgroundColor: bgColor }}
                 >
-                    <div className=" rounded-full p-6 w-32 h-32 bg-white mx-auto items-center justify-center flex">
+
-                        <i className={`devicon-${icon.value}-plain  p-4 dev-icon text-7xl`}></i>
+                    {
-                    </div>
+                        customIcon ?
+                            <div className="w-28 h-28  mx-auto items-center justify-center flex">
+                                <img src={customIcon} alt="img" className="rounded-full bg-white p-1 border-white" />
+                            </div>
+                            :
+                            <div className=" rounded-full p-6 w-32 h-32 bg-white mx-auto items-center justify-center flex">
+                                <i className={`devicon-${icon.value}-plain  p-4 dev-icon text-7xl`}></i>
+                            </div>
+                    }
+
 
                     <div className="h-full w-2/3">
                         <div className={`${font} bg-white px-12 justify-center text-left rounded-xl h-full p-4 flex flex-col`}>
@@ -22,7 +31,7 @@ const ModernTheme = ({ config }) => {
                         </div>
                     </div>
                 </div>
-                
+
             </div>
 
         </div>

src/components/Themes/OutlineTheme.js

@@ -1,6 +1,6 @@
 import React from 'react';
 const OutlineTheme = ({ config }) => {
-    const { title, bgColor, pattern, author, icon, font } = config;
+    const { title, bgColor, pattern, author, icon, font, customIcon } = config;
 
     return (
         <div className="p-4 bg-white border">
@@ -22,7 +22,16 @@ const OutlineTheme = ({ config }) => {
                 </div>
 
                 <div className={`${font} w-full border-gray-800 border-t-4 flex  mt-10 p-2 px-6  items-center bg-white`}>
-                    <i className={`devicon-${icon.value}-plain dev-icon text-4xl`}></i>
+                    {
+                        customIcon ?
+                            <div className="w-12 h-12  ">
+                                <img src={customIcon} alt="img" className="rounded-full bg-white p-1 border-white" />
+                            </div>
+                            :
+                            <div className=" rounded-full p-6 w-32 h-32 bg-white mx-auto items-center justify-center flex">
+                                <i className={`devicon-${icon.value}-plain  p-4 dev-icon text-7xl`}></i>
+                            </div>
+                    }
                     <h2 className="text-xl ml-auto mr-2 font-semibold">{author}</h2>
 
                 </div>