├── .nowignore ├── assets ├── atom.png ├── dock.png ├── dock2.png ├── example.gif ├── hyper.png └── safari.png ├── site ├── public │ ├── a.png │ ├── b.png │ ├── c.png │ ├── d.png │ └── favicon │ │ ├── favicon.ico │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── mstile-150x150.png │ │ ├── apple-touch-icon.png │ │ ├── android-chrome-192x192.png │ │ ├── android-chrome-512x512.png │ │ ├── browserconfig.xml │ │ ├── manifest.json │ │ └── safari-pinned-tab.svg ├── .babelrc ├── .eslintrc.json ├── components │ ├── Icons.js │ ├── Search.js │ ├── Header.js │ ├── Layout.js │ ├── IconGrid.js │ └── Colors.js ├── pages │ ├── _document.js │ ├── index.js │ └── about.js └── package.json ├── .gitignore ├── templates ├── template.png └── template.svg ├── svg ├── safari.svg ├── framer.svg ├── 1password.svg ├── hyper.svg ├── left.svg ├── terminal.svg ├── notes.svg ├── numbers.svg ├── finder.svg ├── quicktime.svg ├── maps.svg ├── mail.svg ├── zoom.svg ├── enpass.svg ├── lightroom.svg ├── dashboard.svg ├── vscode.svg ├── ableton.svg ├── affinity.svg ├── indesign.svg ├── calculator.svg ├── premiere_pro.svg ├── intellij.svg ├── opus.svg ├── illustrator.svg ├── pages.svg ├── dropbox.svg ├── messenger.svg ├── adobe_xd.svg ├── facetime.svg ├── tidal.svg ├── dotgrid.svg ├── affinity_photo.svg ├── ticktick.svg ├── after_effects.svg ├── figma.svg ├── affinity_designer.svg ├── telegram.svg ├── affinity_publisher.svg ├── anki.svg ├── pocketcast.svg ├── github_desktop.svg ├── messages.svg ├── chrome.svg ├── sketch.svg ├── photoshop.svg ├── mongodb.svg ├── trash.svg ├── vivaldi.svg ├── iterm2.svg ├── fork.svg ├── reminders.svg ├── obs.svg ├── spotify.svg ├── launchpad.svg ├── spark.svg ├── chrome2.svg ├── font_book.svg ├── slack.svg ├── bear.svg ├── vlc.svg ├── trello.svg ├── imovie.svg ├── calendar.svg ├── atom.svg ├── quip.svg ├── preview.svg ├── steam.svg ├── books.svg ├── discord.svg ├── finder3.svg ├── notion.svg ├── todoist.svg ├── itunes.svg ├── branch.svg ├── teams.svg ├── sequel_pro.svg ├── camera.svg ├── slack2.svg ├── skype.svg ├── finder2.svg ├── news.svg ├── tableplus.svg ├── wechat.svg ├── snippetslab.svg ├── eagle.svg ├── postman.svg ├── franz.svg ├── photos.svg ├── activity_monitor.svg ├── dictionary.svg ├── transmit.svg ├── simulator.svg ├── brave.svg ├── whatsapp.svg ├── console.svg ├── app_store.svg ├── electron.svg ├── phone.svg ├── chess.svg ├── xcode.svg ├── firefox.svg ├── hyper3.svg ├── contacts.svg └── system_preferences.svg ├── .eslintrc.json ├── now.json ├── package.json ├── CONTRIBUTING.md ├── README.md └── index.js /.nowignore: -------------------------------------------------------------------------------- 1 | * 2 | !site 3 | !site/** 4 | -------------------------------------------------------------------------------- /assets/atom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pacocoursey/Dusk/HEAD/assets/atom.png -------------------------------------------------------------------------------- /assets/dock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pacocoursey/Dusk/HEAD/assets/dock.png -------------------------------------------------------------------------------- /assets/dock2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pacocoursey/Dusk/HEAD/assets/dock2.png -------------------------------------------------------------------------------- /assets/example.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pacocoursey/Dusk/HEAD/assets/example.gif -------------------------------------------------------------------------------- /assets/hyper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pacocoursey/Dusk/HEAD/assets/hyper.png -------------------------------------------------------------------------------- /assets/safari.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pacocoursey/Dusk/HEAD/assets/safari.png -------------------------------------------------------------------------------- /site/public/a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pacocoursey/Dusk/HEAD/site/public/a.png -------------------------------------------------------------------------------- /site/public/b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pacocoursey/Dusk/HEAD/site/public/b.png -------------------------------------------------------------------------------- /site/public/c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pacocoursey/Dusk/HEAD/site/public/c.png -------------------------------------------------------------------------------- /site/public/d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pacocoursey/Dusk/HEAD/site/public/d.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *.ai 3 | node_modules/ 4 | package-lock.json 5 | .next 6 | out 7 | -------------------------------------------------------------------------------- /templates/template.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pacocoursey/Dusk/HEAD/templates/template.png -------------------------------------------------------------------------------- /site/public/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pacocoursey/Dusk/HEAD/site/public/favicon/favicon.ico -------------------------------------------------------------------------------- /site/public/favicon/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pacocoursey/Dusk/HEAD/site/public/favicon/favicon-16x16.png -------------------------------------------------------------------------------- /site/public/favicon/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pacocoursey/Dusk/HEAD/site/public/favicon/favicon-32x32.png -------------------------------------------------------------------------------- /site/public/favicon/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pacocoursey/Dusk/HEAD/site/public/favicon/mstile-150x150.png -------------------------------------------------------------------------------- /site/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "next/babel" 4 | ], 5 | "plugins": [ 6 | "styled-components" 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /site/public/favicon/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pacocoursey/Dusk/HEAD/site/public/favicon/apple-touch-icon.png -------------------------------------------------------------------------------- /site/public/favicon/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pacocoursey/Dusk/HEAD/site/public/favicon/android-chrome-192x192.png -------------------------------------------------------------------------------- /site/public/favicon/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pacocoursey/Dusk/HEAD/site/public/favicon/android-chrome-512x512.png -------------------------------------------------------------------------------- /templates/template.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /svg/safari.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/framer.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "airbnb", 3 | "rules": { 4 | "no-console": "off", 5 | "no-continue": "off", 6 | "no-await-in-loop": "off", 7 | "no-restricted-syntax": "off" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /svg/1password.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /now.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 2, 3 | "name": "dusk", 4 | "builds": [ 5 | { "src": "./site/package.json", "use": "@now/next" } 6 | ], 7 | "routes": [ 8 | { "src": "/(.*)", "dest": "site/$1" } 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /svg/hyper.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/terminal.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/notes.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/numbers.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/finder.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/quicktime.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/public/favicon/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #ffffff 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /svg/maps.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/mail.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/zoom.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/enpass.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/lightroom.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/dashboard.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/vscode.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/ableton.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/affinity.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/indesign.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/calculator.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/premiere_pro.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "airbnb", 3 | "rules": { 4 | "no-console": "off", 5 | "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], 6 | "jsx-a11y/anchor-is-valid": [ "error", { 7 | "components": [ "Link" ], 8 | "specialLink": [ "hrefLeft", "hrefRight" ], 9 | "aspects": [ "invalidHref", "preferButton" ] 10 | }], 11 | "react/prop-types": 0 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /svg/intellij.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/opus.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/illustrator.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/pages.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/dropbox.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/messenger.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/adobe_xd.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/facetime.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/tidal.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/dotgrid.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/affinity_photo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/ticktick.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/public/favicon/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Dusk", 3 | "short_name": "Dusk", 4 | "icons": [ 5 | { 6 | "src": "/favicon/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/favicon/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /svg/after_effects.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/figma.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/affinity_designer.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/telegram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/affinity_publisher.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/anki.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/pocketcast.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/github_desktop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/messages.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/chrome.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/sketch.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/components/Icons.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import * as dusk from 'dusk-react'; 3 | 4 | const Icons = (props) => { 5 | const { 6 | bg, fg, fg2, 7 | } = props; 8 | 9 | const icons = []; 10 | 11 | Object.keys(dusk).forEach((icon) => { 12 | const shortName = icon; 13 | const name = icon 14 | .replace(/([A-Z])/g, ' $1') 15 | .replace(/^./, str => str.toUpperCase()); 16 | 17 | icons.push({ 18 | svg: React.createElement(dusk[icon], { 19 | size: 100, 20 | bg: bg || '#1e1e1e', 21 | fg: fg || '#fff', 22 | fg2: fg2 || '#efefef', 23 | }), 24 | name, 25 | shortName, 26 | }); 27 | }); 28 | 29 | return icons; 30 | }; 31 | 32 | export default Icons; 33 | -------------------------------------------------------------------------------- /svg/photoshop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/mongodb.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/trash.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/vivaldi.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/iterm2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/pages/_document.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Document, { Head, Main, NextScript } from 'next/document'; 3 | import { ServerStyleSheet } from 'styled-components'; 4 | 5 | export default class MyDocument extends Document { 6 | static getInitialProps({ renderPage }) { 7 | const sheet = new ServerStyleSheet(); 8 | const page = renderPage(App => props => sheet.collectStyles()); 9 | const styleTags = sheet.getStyleElement(); 10 | return { ...page, styleTags }; 11 | } 12 | 13 | render() { 14 | return ( 15 | 16 | 17 | {this.props.styleTags} 18 | 19 | 20 |
21 | 22 | 23 | 24 | ); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /svg/fork.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/reminders.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/obs.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/spotify.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dusk", 3 | "version": "0.0.1", 4 | "description": "website for dusk icons", 5 | "repository": "pacocoursey/dusk", 6 | "keywords": [], 7 | "license": "MIT", 8 | "scripts": { 9 | "dev": "next", 10 | "start": "next start", 11 | "build": "next build", 12 | "lint": "eslint --ignore-path ../.gitignore ." 13 | }, 14 | "dependencies": { 15 | "dusk-react": "^1.1.3", 16 | "next": "^9.1.4", 17 | "next-offline": "^3.0.3", 18 | "prop-types": "^15.6.2", 19 | "react": "^16.12.0", 20 | "react-dom": "^16.12.0", 21 | "save-svg-as-png": "^1.4.6", 22 | "styled-components": "^4.0.2" 23 | }, 24 | "devDependencies": { 25 | "eslint": "^5.8.0", 26 | "eslint-config-airbnb": "^17.1.0", 27 | "eslint-plugin-import": "^2.14.0", 28 | "eslint-plugin-jsx-a11y": "^6.1.2", 29 | "eslint-plugin-react": "^7.11.1" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /svg/launchpad.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/spark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/chrome2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/font_book.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/slack.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/bear.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/vlc.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/trello.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/imovie.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/calendar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/atom.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/quip.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dusk-icons", 3 | "version": "0.1.14", 4 | "description": "simple, customizable macOS application icons", 5 | "main": "./index.js", 6 | "bin": { 7 | "dusk-icons": "./index.js" 8 | }, 9 | "files": [ 10 | "svg", 11 | "index.js" 12 | ], 13 | "repository": "pacocoursey/dusk", 14 | "keywords": [ 15 | "dusk", 16 | "icon", 17 | "icons", 18 | "macos", 19 | "application" 20 | ], 21 | "license": "MIT", 22 | "scripts": { 23 | "build": "svgo -f svg", 24 | "prebulishOnly": "svgo -f svg", 25 | "lint": "eslint --ignore-path .gitignore ." 26 | }, 27 | "dependencies": { 28 | "arg": "^3.0.0", 29 | "convert-svg-to-png": "^0.4.0", 30 | "expand-home-dir": "^0.0.3", 31 | "fs-extra": "^7.0.0", 32 | "prompts": "^1.1.1" 33 | }, 34 | "devDependencies": { 35 | "babel-plugin-styled-components": "^1.8.0", 36 | "eslint": "^5.7.0", 37 | "eslint-config-airbnb": "^17.1.0", 38 | "eslint-plugin-import": "^2.14.0", 39 | "eslint-plugin-jsx-a11y": "^6.1.2", 40 | "eslint-plugin-react": "^7.11.1", 41 | "svgo": "^1.1.1" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /svg/preview.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/steam.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/books.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/discord.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/finder3.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/notion.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/todoist.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/itunes.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/branch.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/teams.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/sequel_pro.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/camera.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/slack2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/skype.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/finder2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/news.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/tableplus.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/wechat.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/snippetslab.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/components/Search.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | const Box = styled.div` 5 | display: flex; 6 | width: 100%; 7 | max-width: 990px; 8 | margin-bottom: 30px; 9 | `; 10 | 11 | const SearchBar = styled.input` 12 | flex: 1; 13 | padding: 15px; 14 | font-size: 16px; 15 | border-radius: 3px; 16 | border: 1px solid transparent; 17 | background-color: #fff; 18 | outline: none; 19 | max-width: 990px; 20 | box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 2px 4px; 21 | 22 | transition: border 200ms; 23 | 24 | :focus { 25 | border: 1px solid #868e96; 26 | } 27 | `; 28 | 29 | const Toggle = styled.button` 30 | padding: 15px; 31 | margin-left: 20px; 32 | width: 130px; 33 | 34 | color: #343a40; 35 | font-size: 12px; 36 | text-transform: uppercase; 37 | 38 | border-radius: 3px; 39 | border: 1px solid #dee2e6; 40 | 41 | cursor: pointer; 42 | outline: none; 43 | background-color: transparent; 44 | transition: background-color 200ms; 45 | 46 | :hover, 47 | :focus { 48 | background-color: #f8f9fa; 49 | } 50 | 51 | :active { 52 | background-color: #f1f3f5; 53 | } 54 | `; 55 | 56 | const Search = (props) => { 57 | const { onChange, handleClick, active } = props; 58 | 59 | return ( 60 | 61 | onChange(e)} 66 | /> 67 | 68 | handleClick()}> 69 | {active ? 'Hide Colors' : 'Show Colors'} 70 | 71 | 72 | ); 73 | }; 74 | 75 | export default Search; 76 | -------------------------------------------------------------------------------- /svg/eagle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/postman.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/franz.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/photos.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/activity_monitor.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/dictionary.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/transmit.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/simulator.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Icons from '../components/Icons'; 3 | import Layout from '../components/Layout'; 4 | import Search from '../components/Search'; 5 | import Colors from '../components/Colors'; 6 | import IconGrid from '../components/IconGrid'; 7 | 8 | class Index extends React.Component { 9 | constructor(props) { 10 | super(props); 11 | 12 | const icons = Icons({}); 13 | 14 | this.state = { 15 | initialItems: icons, 16 | items: icons, 17 | query: '', 18 | isColorsActive: false, 19 | }; 20 | } 21 | 22 | filterList(e) { 23 | const { initialItems } = this.state; 24 | let list = initialItems; 25 | list = list.filter(item => item.name.toLowerCase().search( 26 | e.target.value.toLowerCase(), 27 | ) !== -1); 28 | 29 | this.setState({ 30 | items: list, 31 | query: e.target.value.toLowerCase(), 32 | }); 33 | } 34 | 35 | updateColors(o) { 36 | const icons = Icons(o); 37 | this.setState({ 38 | initialItems: icons, 39 | items: icons, 40 | }); 41 | } 42 | 43 | toggleColors() { 44 | this.setState(prevState => ({ 45 | isColorsActive: !prevState.isColorsActive, 46 | })); 47 | } 48 | 49 | resetColors() { 50 | const icons = Icons({}); 51 | this.setState({ 52 | initialItems: icons, 53 | items: icons, 54 | }); 55 | } 56 | 57 | render() { 58 | const { items, query, isColorsActive } = this.state; 59 | 60 | return ( 61 | 62 | this.filterList(e)} 64 | handleClick={() => this.toggleColors()} 65 | active={isColorsActive} 66 | /> 67 | 68 | this.updateColors(o)} 70 | resetColors={() => this.resetColors()} 71 | active={isColorsActive} 72 | /> 73 | 74 | 75 | 76 | ); 77 | } 78 | } 79 | 80 | export default Index; 81 | -------------------------------------------------------------------------------- /site/components/Header.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | import NextLink from 'next/link'; 4 | 5 | const Link = styled.a` 6 | text-decoration: none; 7 | text-decoration: none; 8 | color: #757575; 9 | cursor: pointer; 10 | transition: color 200ms; 11 | 12 | :hover { 13 | color: #000; 14 | } 15 | 16 | :nth-child(2) { 17 | margin-left: 30px; 18 | } 19 | `; 20 | 21 | const Left = styled.div` 22 | flex: 1; 23 | display: flex; 24 | flex-direction: row; 25 | justify-content: flex-start; 26 | align-items: center; 27 | `; 28 | 29 | const Center = styled.h1` 30 | cursor: pointer; 31 | font-size: 24px; 32 | font-weight: 800; 33 | flex: 1; 34 | display: flex; 35 | flex-direction: row; 36 | justify-content: center; 37 | align-items: center; 38 | `; 39 | 40 | const Right = styled.div` 41 | flex: 1; 42 | display: flex; 43 | flex-direction: row; 44 | justify-content: flex-end; 45 | align-items: center; 46 | `; 47 | 48 | const Nav = styled.nav` 49 | display: flex; 50 | flex-direction: row; 51 | justify-content: flex-start; 52 | align-items: center; 53 | height: 75px; 54 | padding: 0 50px; 55 | border-bottom: 1px solid #eee; 56 | box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.06); 57 | `; 58 | 59 | const Header = () => ( 60 | 92 | ); 93 | 94 | export default Header; 95 | -------------------------------------------------------------------------------- /site/components/Layout.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Head from 'next/head'; 3 | import styled, { createGlobalStyle } from 'styled-components'; 4 | import Header from './Header'; 5 | 6 | const GlobalStyle = createGlobalStyle` 7 | * { 8 | box-sizing: border-box; 9 | } 10 | 11 | html, 12 | body { 13 | margin: 0; 14 | padding: 0; 15 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 16 | } 17 | `; 18 | 19 | const Wrapper = styled.div` 20 | margin: 0; 21 | padding: 0; 22 | height: 100vh; 23 | `; 24 | 25 | const Main = styled.main` 26 | padding: 50px 20px; 27 | 28 | display: flex; 29 | flex-direction: column; 30 | justify-content: flex-start; 31 | align-items: center; 32 | `; 33 | 34 | const Layout = ({ children }) => ( 35 | 36 | 37 | Dusk Icons 38 | 39 | 40 | 41 | 42 | 43 | 44 | {/* Favicon */} 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 |
55 |
56 | { children } 57 |
58 | 59 | 60 | 61 | ); 62 | 63 | export default Layout; 64 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing Guidelines 2 | 3 | Thanks for your interest in contributing to Dusk! 🖤 4 | 5 | ## Icon Requests 6 | 7 | Want to see an icon for your favorite app? Want to offer an alternative icon? I'd love to include it. 8 | 9 | Please [create an issue](https://github.com/pacocoursey/dusk/issues/new?title=Icon%20Request:) with the title `Icon Request: `, a link to the application, an image of the logo, and someone will design it! 10 | 11 | If you have already designed the icon yourself, please [open a pull request](https://github.com/pacocoursey/Dusk/pulls) with the title `Add Icon: ` after adding the `.svg` file to the `svg/` folder, and listing the icon in the table at the bottom of the README. 12 | 13 | ### Design Guidelines 14 | 15 | Dusk icons aim to replicate the design of application icons with a single, defining element that is easily recognizable in any colorway. For example, the Safari application icon can be identified based solely on the compass needle. Please see the [template files](https://github.com/pacocoursey/Dusk/tree/master/templates) to design your own icon. 16 | 17 | Many application icons are sufficiently minimal and do not need modification. In the case of a complex design, please try to simplify it to a single design element. 18 | 19 | ### Format 20 | 21 | Dusk icons are defined as SVG files. 22 | 23 | - Use a circle of radius `256px` (height and width of `512px`). 24 | - Center the design element within the circle. 25 | - Constrain the design element to a max height/width of `255px` (this limit is flexible, the size of the design element should feel natural and comparable to other icons). 26 | - Prefer a stroke-width of `20px` (but try match existing icons). 27 | - Tilted design elements should have a rotation of `9deg`. 28 | 29 | Icons that include text should use [Gilroy Extra Bold](https://www.tinkov.info/gilroy.html). 30 | 31 | After completing the design, export it to an svg file and minimize it using: 32 | 33 | ```bash 34 | $ yarn build 35 | # or 36 | $ npm run build 37 | ``` 38 | 39 | ## Pull Requests 40 | 41 | Pull requests for new features, bug fixes, and improvements are welcome and appreciated. 42 | -------------------------------------------------------------------------------- /svg/brave.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/whatsapp.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/console.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/app_store.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/components/IconGrid.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | import { saveSvgAsPng } from 'save-svg-as-png'; 4 | 5 | const Grid = styled.div` 6 | display: flex; 7 | justify-content: center; 8 | flex-wrap: wrap; 9 | width: 100%; 10 | max-width: 1000px; 11 | `; 12 | 13 | const Icon = styled.div` 14 | flex: 1; 15 | min-width: 200px; 16 | max-width: 49%; 17 | height: 200px; 18 | border-radius: 5px; 19 | background-color: #f9f9f9; 20 | 21 | padding: 20px 0; 22 | margin: 5px; 23 | 24 | display: flex; 25 | flex-direction: column; 26 | justify-content: space-between; 27 | align-items: center; 28 | 29 | cursor: pointer; 30 | transition: background-color 100ms; 31 | 32 | :hover { 33 | background-color: #efefef; 34 | } 35 | `; 36 | 37 | const None = styled.div` 38 | flex: 1; 39 | height: 200px; 40 | flex-basis: 100%; 41 | min-width: 100%; 42 | width: 100%; 43 | 44 | padding: 20px; 45 | margin: 5px; 46 | 47 | border-radius: 5px; 48 | background-color: #f9f9f9; 49 | color: #868e96; 50 | text-align: center; 51 | 52 | display: flex; 53 | flex-direction: column; 54 | justify-content: center; 55 | align-items: center; 56 | 57 | user-select: none; 58 | `; 59 | 60 | class IconGrid extends React.Component { 61 | constructor(props) { 62 | super(props); 63 | 64 | const { icons } = props; 65 | this.icons = {}; 66 | icons.forEach((icon) => { 67 | this.icons[icon.name] = React.createRef(); 68 | }); 69 | } 70 | 71 | render() { 72 | const { icons, query } = this.props; 73 | return ( 74 | 75 | { 76 | icons.length === 0 ? ( 77 | 78 | No results found for 79 | " 80 | {query} 81 | " 82 | 83 | ) : icons.map(icon => ( 84 | { 88 | saveSvgAsPng( 89 | this.icons[icon.name].current.children[0].children[0], 90 | `${icon.shortName}.png`, 91 | ); 92 | }} 93 | > 94 |
95 | {icon.svg} 96 |
97 |

{icon.name}

98 | 99 | )) 100 | } 101 | 102 | ); 103 | } 104 | } 105 | 106 | export default IconGrid; 107 | -------------------------------------------------------------------------------- /svg/electron.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/phone.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/chess.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/xcode.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/pages/about.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | import Layout from '../components/Layout'; 4 | 5 | const Box = styled.div` 6 | flex: 1; 7 | width: 100%; 8 | max-width: 500px; 9 | 10 | h1 { 11 | font-size: 24px; 12 | font-weight: 800; 13 | margin: 20px 0; 14 | } 15 | `; 16 | 17 | const Text = styled.p` 18 | line-height: 1.7; 19 | font-weight: 400; 20 | color: #495057; 21 | margin-bottom: 30px; 22 | 23 | a { 24 | text-decoration: underline; 25 | color: inherit; 26 | } 27 | 28 | kbd { 29 | padding: 2px; 30 | border-radius: 5px; 31 | background-color: #f8f9fa; 32 | } 33 | `; 34 | 35 | const Image = styled.div` 36 | display: flex; 37 | flex-direction: row; 38 | justify-content: center; 39 | align-items: center; 40 | 41 | img { 42 | height: 350px; 43 | } 44 | `; 45 | 46 | const About = () => ( 47 | 48 | 49 |

About

50 | 51 | Dusk is a collection of simple, customizable macOS application icons. 52 | You can generate them via 53 | {' '} 54 | 59 | command line 60 | 61 | , download from this website, or view the source on 62 | {' '} 63 | 68 | GitHub 69 | 70 | . 71 | 72 | 73 |

Motivation

74 | 75 | You can't customize much of macOS. 76 | Replacing application icons with themed variants is a great way to personalize your desktop. 77 | 78 | 79 |

Usage

80 | 81 | Replacing application icons can be done manually or using  82 | 87 | LiteIcon 88 | 89 | . 90 | 91 | 92 |

Manually

93 | 94 | 95 | Open the information panel for the application using 96 | {' '} 97 | ⌘I 98 | {' '} 99 | or right clicking and selecting "Get Info". 100 | 101 | 102 | 103 | Example Application Information Panel 104 | 105 | 106 | 107 | Open the replacement icon in Preview and copy it using 108 | {' '} 109 | ⌘A ⌘C 110 | {' '} 111 | . 112 | 113 | 114 | 115 | Example Replacement Icon in Preview 116 | 117 | 118 | 119 | Click the icon in the top left of the information panel so that it has a blue outline. 120 | Paste the new icon using 121 | {' '} 122 | ⌘V 123 | . 124 | 125 | 126 | 127 | Pasting into Application Information Panel 128 | New Icon in the Application Information Panel 129 | 130 | 131 | 132 | ); 133 | 134 | export default About; 135 | -------------------------------------------------------------------------------- /site/components/Colors.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | let localStorageExists = false; 5 | 6 | try { 7 | localStorageExists = window && window.localStorage; 8 | } catch (e) { 9 | // Do nothing 10 | } 11 | 12 | const Box = styled.div` 13 | width: 100%; 14 | max-width: 990px; 15 | padding: 20px; 16 | margin-bottom: 30px; 17 | 18 | border-radius: 3px; 19 | border: 1px solid #efefef; 20 | 21 | display: flex; 22 | flex-wrap: wrap; 23 | flex-direction: row; 24 | justify-content: space-between; 25 | align-items: center; 26 | 27 | ${props => (props.active ? 'display: flex' : 'display: none')} 28 | `; 29 | 30 | const Input = styled.div` 31 | width: 20%; 32 | min-width: 200px; 33 | border-radius: 3px; 34 | margin: 10px; 35 | 36 | display: flex; 37 | flex-direction: row; 38 | justify-content: space-between; 39 | align-items: center; 40 | 41 | box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 4px; 42 | `; 43 | 44 | const Name = styled.div` 45 | margin: 0 10px; 46 | 47 | color: #868e96; 48 | 49 | font-size: 12px; 50 | text-transform: uppercase; 51 | `; 52 | 53 | const TextInput = styled.input` 54 | flex: 1; 55 | 56 | min-width: 0; 57 | padding: 15px; 58 | 59 | border: 0; 60 | border-radius: 0 3px 3px 0; 61 | border-left: 1px solid #dee2e6; 62 | 63 | font-size: 16px; 64 | background-color: #fff; 65 | 66 | outline: none; 67 | transition: border 200ms; 68 | `; 69 | 70 | const Button = styled.button` 71 | padding: 15px; 72 | margin: 10px; 73 | 74 | color: #343a40; 75 | font-size: 12px; 76 | font-weight: 600; 77 | text-transform: uppercase; 78 | 79 | border-radius: 3px; 80 | border: 1px solid #dee2e6; 81 | 82 | cursor: pointer; 83 | outline: none; 84 | background-color: transparent; 85 | transition: background-color 200ms; 86 | 87 | :hover, 88 | :focus { 89 | background-color: #f8f9fa; 90 | } 91 | 92 | :active { 93 | background-color: #f1f3f5; 94 | } 95 | `; 96 | 97 | const Reset = styled(Button)` 98 | color: #868e96; 99 | font-weight: 400; 100 | border: 0; 101 | background-color: transparent; 102 | `; 103 | 104 | class Colors extends React.Component { 105 | constructor(props) { 106 | super(props); 107 | 108 | this.state = { 109 | bg: '#1e1e1e', 110 | fg: '#fff', 111 | fg2: '#efefef', 112 | }; 113 | 114 | if (localStorageExists) { 115 | const colors = window.localStorage.getItem('colors'); 116 | if (colors) { 117 | this.state = JSON.parse(colors); 118 | } 119 | } 120 | } 121 | 122 | render() { 123 | const { active, applyColors, resetColors } = this.props; 124 | const { bg, fg, fg2 } = this.state; 125 | 126 | if (localStorageExists) { 127 | window.localStorage.setItem('colors', JSON.stringify(this.state)); 128 | } 129 | 130 | return ( 131 | 132 | 133 | Background 134 | this.setState({ bg: e.target.value })} 139 | /> 140 | 141 | 142 | 143 | Foreground 144 | this.setState({ fg: e.target.value })} 149 | /> 150 | 151 | 152 | 153 | Secondary 154 | this.setState({ fg2: e.target.value })} 159 | /> 160 | 161 | 162 | { 164 | this.setState({ 165 | bg: '#1e1e1e', 166 | fg: '#fff', 167 | fg2: '#efefef', 168 | }); 169 | resetColors(); 170 | }} 171 | > 172 | Reset 173 | 174 | 175 | 176 | 177 | ); 178 | } 179 | } 180 | 181 | export default Colors; 182 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Dusk 2 | 3 | simple, customizable macOS application icons. 4 | 5 |

6 | 7 | 8 | 9 |

10 | 11 | ## Install 12 | 13 | Dusk icons can be used from the command line, via the [Dusk website](https://dusk.now.sh), or as React components [(dusk-react)](https://github.com/pacocoursey/dusk-react). 14 | 15 | ### CLI [![npm version](https://badge.fury.io/js/dusk-icons.svg)](https://badge.fury.io/js/dusk-icons) 16 | 17 | Install the command line tool using npm: 18 | 19 | ```bash 20 | $ [sudo] npm install -g dusk-icons 21 | ``` 22 | 23 | Then run `dusk-icons` from the command line. Enter a list of comma separated icons. 24 | 25 |

26 | 27 |

28 | 29 | ## Contributing 30 | 31 | For info on how to contribute to Dusk, please see the [contribution guidelines](https://github.com/pacocoursey/dusk/blob/master/CONTRIBUTING.md). 32 | 33 | ## Examples 34 | 35 | ![Dusk Customized Dock Example](assets/dock.png) 36 | ![Dusk Customized Dock Example 2](assets/dock2.png) 37 | 38 | ## Related 39 | 40 | - [LiteIcon](https://freemacsoft.net/liteicon/): app which allows you to change your system icons. 41 | - [Feather](https://github.com/colebemis/feather): Simple, beautiful open source icons. 42 | 43 | ## Icons 44 | 45 | | Application | Icon Name | Alternates | 46 | | :---------- | :-------- | :--------- | 47 | | 1Password | `1password` | 48 | | Ableton | `ableton` | 49 | | Activity Monitor | `activity_monitor` | 50 | | Adobe After Effects | `after_effects` | 51 | | Adobe Illustrator | `illustrator` | 52 | | Adobe InDesign | `indesign` | 53 | | Adobe Lightroom | `lightroom` | 54 | | Adobe Photoshop | `photoshop` | 55 | | Adobe Premiere Pro | `premiere_pro` | 56 | | Adobe Xd | `adobe_xd` | 57 | | Affinity | `affinity` | `affinity_designer`, `affinity_photo`, `affinity_publisher` | 58 | | Anki | `anki` | 59 | | App Store | `app_store` | 60 | | Atom | `atom` | 61 | | Bear | `bear` | 62 | | Books | `books` | 63 | | Brave Browser | `brave` | 64 | | Calculator | `calculator` | 65 | | Calendar | `calendar` | 66 | | Camera | `camera` | 67 | | Chess | `chess` | 68 | | Console | `console` | 69 | | Contacts | `contacts` | 70 | | Dashboard | `dashboard` | 71 | | Dictionary | `dictionary` | 72 | | Discord | `discord` | 73 | | Dotgrid | `dotgrid` | 74 | | Dropbox | `dropbox` | 75 | | Eagle | `eagle` | 76 | | Electron | `electron` | 77 | | Enpass | `enpass` | 78 | | Facebook Messenger | `messenger` | 79 | | Facetime | `facetime` | 80 | | Figma | `figma` | 81 | | Finder | `finder` | `finder2`, `finder3` | 82 | | Firefox | `firefox` | 83 | | Font Book | `font_book` | 84 | | Framer | `framer` | 85 | | Franz | `franz` | 86 | | Git | `branch` | 87 | | Git Fork | `fork` | 88 | | GitHub Desktop | `github_desktop` | 89 | | Google Chrome | `chrome` | `chrome2` | 90 | | Hyper | `hyper` | `hyper3` | 91 | | iMovie | `imovie` | 92 | | IntelliJ | `intellij` | 93 | | iTerm2 | `iterm2` | 94 | | iTunes | `itunes` | 95 | | Launchpad | `launchpad` | 96 | | Left | `left` | 97 | | Mail | `mail` | 98 | | Maps | `maps` | 99 | | Messages | `messages` | 100 | | Microsoft Teams | `teams` | 101 | | MongoDB Compass | `mongodb` | 102 | | News | `news` | 103 | | Notes | `notes` | 104 | | Notion | `notion` | 105 | | Numbers | `numbers` | 106 | | OBS | `obs` | 107 | | Pages | `pages` | 108 | | Photos | `photos` | 109 | | PocketCast | `pocketcast` | 110 | | Postman | `postman` | 111 | | Preview | `preview` | 112 | | Quicktime Player | `quicktime` | 113 | | Quip | `quip` | 114 | | Reminders | `reminders` | 115 | | Safari | `safari` | 116 | | Sequel Pro | `sequel_pro` | 117 | | Simulator | `simulator` | 118 | | Sketch | `sketch` | 119 | | Skype | `skype` | 120 | | Slack | `slack` | `slack2` | 121 | | SnippetsLab | `snippetslab` | 122 | | Spark | `spark` 123 | | Spotify | `spotify` | 124 | | Steam | `steam` | 125 | | System Preferences | `system_preferences` | 126 | | TablePlus | `tableplus` | 127 | | Telegram | `telegram` | 128 | | Terminal | `terminal` | 129 | | Ticktick | `ticktick` | 130 | | Tidal | `tidal` | 131 | | Todoist | `todoist` | 132 | | Transmit | `transmit` | 133 | | Trash | `trash` | 134 | | Trello | `trello` | 135 | | Vivaldi | `vivaldi` | 136 | | VLC | `vlc` | 137 | | VSCode | `vscode` | 138 | | Wechat | `wechat` | 139 | | Whatsapp | `whatsapp` | 140 | | Xcode | `xcode` | 141 | | Zoom | `zoom` | 142 | -------------------------------------------------------------------------------- /site/public/favicon/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.11, written by Peter Selinger 2001-2013 9 | 10 | 12 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /svg/firefox.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/hyper3.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svg/contacts.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const arg = require('arg'); 4 | const path = require('path'); 5 | const fs = require('fs-extra'); 6 | const prompts = require('prompts'); 7 | const { promisify } = require('util'); 8 | const { convertFile } = require('convert-svg-to-png'); 9 | const expandHomeDir = require('expand-home-dir'); 10 | const { version } = require('./package.json'); 11 | 12 | const writeFile = promisify(fs.writeFile); 13 | const readFile = promisify(fs.readFile); 14 | 15 | const bold = '\x1b[1m'; 16 | const reset = '\x1b[0m'; 17 | 18 | function usage() { 19 | console.log(` 20 | ${bold}Usage${reset}: 21 | 22 | dusk-icons [] 23 | 24 | ${bold}Flags${reset}: 25 | 26 | -h, --help Output usage information 27 | -v, --version Show application version 28 | `); 29 | } 30 | 31 | function fail(msg) { 32 | console.log(`✖ ${msg}`); 33 | } 34 | 35 | function succeed(msg) { 36 | console.log(`✔ ${msg}`); 37 | } 38 | 39 | function hexMatch(str) { 40 | return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(str); 41 | } 42 | 43 | async function convert(inputPath, outputPath) { 44 | const doesExist = await fs.pathExists(inputPath); 45 | 46 | if (!doesExist) { 47 | return false; 48 | } 49 | 50 | const output = await convertFile(inputPath, { 51 | height: 512, 52 | width: 512, 53 | outputFilePath: outputPath, 54 | }); 55 | 56 | return output; 57 | } 58 | 59 | async function convertIcons(options) { 60 | const { 61 | output, 62 | fg, 63 | fg2, 64 | bg, 65 | icons, 66 | } = options; 67 | 68 | for (let icon of icons) { 69 | try { 70 | icon = icon.replace(' ', '_'); 71 | const outputPath = path.resolve(output, `${icon}.png`); 72 | const inputPath = path.join(__dirname, `svg/${icon}.svg`); 73 | 74 | const exists = await fs.pathExists(inputPath); 75 | if (!exists) { 76 | fail(`Icon ${icon} does not exist.`); 77 | continue; 78 | } 79 | 80 | // Read the original svg file 81 | let tmpFile = await readFile(inputPath, 'utf-8'); 82 | 83 | const map = { 84 | '#1e1e1e': bg, 85 | '#fff': fg, 86 | '#efefef': fg2, 87 | }; 88 | 89 | // Replace with specified colors 90 | // Using function to avoid multiple replacements 91 | tmpFile = tmpFile.replace( 92 | /#1e1e1e|#fff|#efefef/gi, 93 | matched => map[matched.toLowerCase()], 94 | ); 95 | 96 | // Write the temporary svg file 97 | const tmpFilePath = path.resolve(output, `${icon}-tmp.svg`); 98 | 99 | try { 100 | await writeFile(tmpFilePath, tmpFile, 'utf-8'); 101 | } catch (err) { 102 | fail(`Error creating temporary svg file for ${icon}.`); 103 | } 104 | 105 | // Pass the temporary svg file to convert it 106 | const file = await convert(tmpFilePath, outputPath); 107 | 108 | // Check if conversion was successful 109 | if (!file) { 110 | fail(`Icon ${icon} does not exist.`); 111 | } else { 112 | succeed(`Generated ${icon} icon at ${file}`); 113 | } 114 | 115 | // Remove the generated temporary file 116 | await fs.remove(tmpFilePath); 117 | } catch (err) { 118 | console.log(err); 119 | process.exit(1); 120 | } 121 | } 122 | } 123 | 124 | async function convertAll(response) { 125 | const { 126 | output, 127 | fg, 128 | fg2, 129 | bg, 130 | } = response; 131 | 132 | // Get a list of all icons in the svg folder. 133 | // Filter out dotfiles, remove the .svg extension 134 | const icons = fs.readdirSync(path.join(__dirname, 'svg/')) 135 | .filter(icon => icon.endsWith('.svg')) 136 | .map(icon => icon.slice(0, -4)); 137 | 138 | convertIcons({ 139 | output, 140 | fg, 141 | fg2, 142 | bg, 143 | icons, 144 | }); 145 | } 146 | 147 | async function start() { 148 | const questions = [ 149 | { 150 | type: 'text', 151 | name: 'output', 152 | message: 'Output directory:', 153 | initial: '.', 154 | validate: async (value) => { 155 | let output = value; 156 | if (output.charAt(0) === '~') { 157 | output = expandHomeDir(output); 158 | } 159 | 160 | const exists = await fs.pathExists(output); 161 | if (!exists) { 162 | return 'This output path does not exist.'; 163 | } 164 | 165 | return true; 166 | }, 167 | }, 168 | { 169 | type: 'text', 170 | name: 'fg', 171 | message: 'Primary foreground color:', 172 | initial: '#ffffff', 173 | validate: value => (!hexMatch(value) ? 'Please enter a valid hex code.' : true), 174 | }, 175 | { 176 | type: 'text', 177 | name: 'fg2', 178 | message: 'Secondary foreground color:', 179 | initial: '#efefef', 180 | validate: value => (!hexMatch(value) ? 'Please enter a valid hex code.' : true), 181 | }, 182 | { 183 | type: 'text', 184 | name: 'bg', 185 | message: 'Background color:', 186 | initial: '#1e1e1e', 187 | validate: value => (!hexMatch(value) ? 'Please enter a valid hex code.' : true), 188 | }, 189 | { 190 | type: 'list', 191 | name: 'icons', 192 | message: 'Enter icons to generate:', 193 | initial: 'all', 194 | separator: ',', 195 | }, 196 | ]; 197 | 198 | try { 199 | const response = await prompts(questions, { 200 | onCancel: () => { 201 | fail('Cancelled dusk-icons.'); 202 | process.exit(1); 203 | }, 204 | }); 205 | 206 | const { icons } = response; 207 | 208 | // Handle home directory paths 209 | if (response.output.charAt(0) === '~') { 210 | response.output = expandHomeDir(response.output); 211 | } 212 | 213 | if (icons.includes('all')) { 214 | try { 215 | await convertAll(response); 216 | } catch (err) { 217 | console.log(err); 218 | process.exit(1); 219 | } 220 | } else { 221 | convertIcons(response); 222 | } 223 | } catch (err) { 224 | console.log(err); 225 | process.exit(1); 226 | } 227 | } 228 | 229 | const args = arg({ 230 | '--version': Boolean, 231 | '--help': Boolean, 232 | 233 | '-v': '--version', 234 | '-h': '--help', 235 | }, { 236 | permissive: true, 237 | }); 238 | 239 | if (args['--version']) { 240 | console.log(version); 241 | process.exit(1); 242 | } else if (args['--help']) { 243 | usage(); 244 | process.exit(1); 245 | } else { 246 | start(); 247 | } 248 | -------------------------------------------------------------------------------- /svg/system_preferences.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------