VSCode Icon Generator

44 |

45 |

51 |

52 | {displayed ? ( 53 |

54 |

55 | color[isForeground ? 'foreground' : 'background'], 58 | )} 59 | color={color} 60 | onChange={colorHandler} 61 | disableAlpha 62 | /> 63 |

64 | ) : null} 65 |

66 | ) 67 | } 68 | 69 | render() { 70 | const { 71 | onForegroundChange, 72 | onForeground2Change, 73 | onBackgroundChange, 74 | onSizeChange, 75 | onSeparateForeground, 76 | onRandom, 77 | background, 78 | foreground, 79 | foreground2, 80 | separateForeground, 81 | size, 82 | } = this.props 83 | 84 | return ( 85 |

86 |

87 | Separate foregrounds? 88 | 94 |

95 |

96 | Foreground : 97 | {this.renderColorPicker( 98 | foreground, 99 | true, 100 | onForegroundChange, 101 | this.displayForeground, 102 | this.state.displayForeground, 103 | )} 104 |

105 | {separateForeground ? ( 106 |

107 | Foreground 2 : 108 | {this.renderColorPicker( 109 | foreground2, 110 | true, 111 | onForeground2Change, 112 | this.displayForeground2, 113 | this.state.displayForeground2, 114 | )} 115 |

116 | ) : ( 117 | '' 118 | )} 119 |

120 | Background : 121 | {this.renderColorPicker( 122 | background, 123 | false, 124 | onBackgroundChange, 125 | this.displayBackground, 126 | this.state.displayBackground, 127 | )} 128 |

129 |

130 | Size: 131 | 138 |

139 |

140 | 141 |

142 |

143 | ) 144 | } 145 | } 146 | 147 | export default ControlsRenderer 148 | -------------------------------------------------------------------------------- /src/IconRenderer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const IconRenderer = props => { 4 | const { background, foreground, foreground2, size } = props 5 | return ( 6 | 94 | ) 95 | } 96 | 97 | export default IconRenderer 98 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | height: 100vh; 3 | background-color: #2c3e50; 4 | color: #ffffff; 5 | font-family: sans-serif; 6 | } 7 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import registerServiceWorker from './registerServiceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | registerServiceWorker(); 9 | -------------------------------------------------------------------------------- /src/material-colors.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "foreground": "#f44336", 4 | "background": "#d32f2f" 5 | }, 6 | { 7 | "foreground": "#E91E63", 8 | "background": "#C2185B" 9 | }, 10 | { 11 | "foreground": "#9C27B0", 12 | "background": "#7B1FA2" 13 | }, 14 | { 15 | "foreground": "#673AB7", 16 | "background": "#512DA8" 17 | }, 18 | { 19 | "foreground": "#3F51B5", 20 | "background": "#303F9F" 21 | }, 22 | { 23 | "foreground": "#2196F3", 24 | "background": "#1976D2" 25 | }, 26 | { 27 | "foreground": "#03A9F4", 28 | "background": "#0288D1" 29 | }, 30 | { 31 | "foreground": "#00BCD4", 32 | "background": "#0097A7" 33 | }, 34 | { 35 | "foreground": "#009688", 36 | "background": "#00796B" 37 | }, 38 | { 39 | "foreground": "#4CAF50", 40 | "background": "#388E3C" 41 | }, 42 | { 43 | "foreground": "#8BC34A", 44 | "background": "#689F38" 45 | }, 46 | { 47 | "foreground": "#CDDC39", 48 | "background": "#AFB42B" 49 | }, 50 | { 51 | "foreground": "#FFEB3B", 52 | "background": "#FBC02D" 53 | }, 54 | { 55 | "foreground": "#FFC107", 56 | "background": "#FFA000" 57 | }, 58 | { 59 | "foreground": "#FF9800", 60 | "background": "#F57C00" 61 | }, 62 | { 63 | "foreground": "#FF5722", 64 | "background": "#E64A19" 65 | }, 66 | { 67 | "foreground": "#795548", 68 | "background": "#5D4037" 69 | }, 70 | { 71 | "foreground": "#9E9E9E", 72 | "background": "#616161" 73 | }, 74 | { 75 | "foreground": "#607D8B", 76 | "background": "#455A64" 77 | } 78 | ] 79 | -------------------------------------------------------------------------------- /src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | // In production, we register a service worker to serve assets from local cache. 2 | 3 | // This lets the app load faster on subsequent visits in production, and gives 4 | // it offline capabilities. However, it also means that developers (and users) 5 | // will only see deployed updates on the "N+1" visit to a page, since previously 6 | // cached resources are updated in the background. 7 | 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. 9 | // This link also includes instructions on opting out of this behavior. 10 | 11 | const isLocalhost = Boolean( 12 | window.location.hostname === 'localhost' || 13 | // [::1] is the IPv6 localhost address. 14 | window.location.hostname === '[::1]' || 15 | // 127.0.0.1/8 is considered localhost for IPv4. 16 | window.location.hostname.match( 17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 18 | ) 19 | ); 20 | 21 | export default function register() { 22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 23 | // The URL constructor is available in all browsers that support SW. 24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location); 25 | if (publicUrl.origin !== window.location.origin) { 26 | // Our service worker won't work if PUBLIC_URL is on a different origin 27 | // from what our page is served on. This might happen if a CDN is used to 28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 29 | return; 30 | } 31 | 32 | window.addEventListener('load', () => { 33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 34 | 35 | if (isLocalhost) { 36 | // This is running on localhost. Lets check if a service worker still exists or not. 37 | checkValidServiceWorker(swUrl); 38 | } else { 39 | // Is not local host. Just register service worker 40 | registerValidSW(swUrl); 41 | } 42 | }); 43 | } 44 | } 45 | 46 | function registerValidSW(swUrl) { 47 | navigator.serviceWorker 48 | .register(swUrl) 49 | .then(registration => { 50 | registration.onupdatefound = () => { 51 | const installingWorker = registration.installing; 52 | installingWorker.onstatechange = () => { 53 | if (installingWorker.state === 'installed') { 54 | if (navigator.serviceWorker.controller) { 55 | // At this point, the old content will have been purged and 56 | // the fresh content will have been added to the cache. 57 | // It's the perfect time to display a "New content is 58 | // available; please refresh." message in your web app. 59 | console.log('New content is available; please refresh.'); 60 | } else { 61 | // At this point, everything has been precached. 62 | // It's the perfect time to display a 63 | // "Content is cached for offline use." message. 64 | console.log('Content is cached for offline use.'); 65 | } 66 | } 67 | }; 68 | }; 69 | }) 70 | .catch(error => { 71 | console.error('Error during service worker registration:', error); 72 | }); 73 | } 74 | 75 | function checkValidServiceWorker(swUrl) { 76 | // Check if the service worker can be found. If it can't reload the page. 77 | fetch(swUrl) 78 | .then(response => { 79 | // Ensure service worker exists, and that we really are getting a JS file. 80 | if ( 81 | response.status === 404 || 82 | response.headers.get('content-type').indexOf('javascript') === -1 83 | ) { 84 | // No service worker found. Probably a different app. Reload the page. 85 | navigator.serviceWorker.ready.then(registration => { 86 | registration.unregister().then(() => { 87 | window.location.reload(); 88 | }); 89 | }); 90 | } else { 91 | // Service worker found. Proceed as normal. 92 | registerValidSW(swUrl); 93 | } 94 | }) 95 | .catch(() => { 96 | console.log( 97 | 'No internet connection found. App is running in offline mode.' 98 | ); 99 | }); 100 | } 101 | 102 | export function unregister() { 103 | if ('serviceWorker' in navigator) { 104 | navigator.serviceWorker.ready.then(registration => { 105 | registration.unregister(); 106 | }); 107 | } 108 | } 109 | --------------------------------------------------------------------------------