├── .gitignore ├── README.md ├── examples ├── react-native-example │ ├── .babelrc │ ├── .gitignore │ ├── .watchmanconfig │ ├── App.js │ ├── App.test.js │ ├── README.md │ ├── app.json │ ├── icons.js │ └── package.json └── react-web-example │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json │ └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── Controls.js │ ├── icons.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ └── registerServiceWorker.js ├── package.json ├── packages ├── unicon-cli │ ├── README.md │ ├── bin │ │ └── unicon.js │ ├── package.json │ └── src │ │ ├── index.js │ │ └── utils.js ├── unicon-react │ ├── .gitignore │ ├── README.md │ ├── package.json │ └── src │ │ ├── index.js │ │ └── react-native.js ├── unicon-transformer-json │ ├── README.md │ ├── index.js │ └── package.json └── unicon │ ├── README.md │ ├── index.js │ ├── package.json │ └── src │ ├── get-svgs-from-figma.js │ ├── get-svgs-from-folder.js │ ├── get-svgs-from-sketch.js │ ├── index.js │ └── utils.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | .env 2 | .DS_Store 3 | node_modules -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🦄 unicon 2 | 3 | Wrangle SVGs from your favorite design tool. Works with Figma, Sketch, and 4 | anything else that can export svgs. 5 | 6 | ## ☢️ Warning 7 | 8 | API may be in flux until an official V1. Please use at your own risk. 9 | 10 | ## 📦 Packages 11 | 12 | ### [unicon](/packages/unicon) 13 | 14 | A set of functions to source SVG data from _any_ design tool. 15 | 16 | ### [unicon-transformer-json](/packages/unicon-transformer-json) 17 | 18 | Clean and transform SVG data into JSON fragments. 19 | 20 | ### [unicon-cli](/packages/unicon-cli) 21 | 22 | Source data and use transformers to create a file of individually exported SVG 23 | data fragments. 24 | 25 | ### [unicon-react](/packages/unicon-react) 26 | 27 | Universal SVG rendering in React. 28 | 29 | ## 🤠 Examples 30 | 31 | Check out the [examples](/examples) folder for working examples in React and 32 | React Native. 33 | 34 | ## 🙏 Thanks 35 | 36 | This project is built on the shoulders of giants and wouldn't be possible 37 | without an amazing community. Huge thanks to the following people: 38 | 39 | - [Brent Jackson](https://twitter.com/jxnblk) for always experimenting with 40 | design tools and creating projects like 41 | [figma-theme](https://github.com/jxnblk/figma-theme#readme) and 42 | [pixo](https://github.com/c8r/pixo) 43 | - [Github Design](https://twitter.com/githubdesign) for sharing 44 | [their thoughts on icons](https://blog.github.com/2018-04-12-driving-changes-from-designs/) 45 | - [Jon Gold](https://twitter.com/jongold) for making the 46 | [Figma API easy as heck to work with](https://github.com/jongold/figma-js#readme) 47 | - [David Gilbertson](https://twitter.com/D__Gilbertson) for his wonderful 48 | article on 49 | [icons as react components](https://medium.com/@david.gilbertson/icons-as-react-components-de3e33cb8792) 50 | - [Daniel Dunderfelt](https://twitter.com/ddunderfelt) for the unicon NPM 51 | package name 52 | -------------------------------------------------------------------------------- /examples/react-native-example/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["babel-preset-expo"], 3 | "env": { 4 | "development": { 5 | "plugins": ["transform-react-jsx-source"] 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /examples/react-native-example/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # expo 4 | .expo/ 5 | 6 | # dependencies 7 | /node_modules 8 | 9 | # misc 10 | .env.local 11 | .env.development.local 12 | .env.test.local 13 | .env.production.local 14 | 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | -------------------------------------------------------------------------------- /examples/react-native-example/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /examples/react-native-example/App.js: -------------------------------------------------------------------------------- 1 | import React, { Children, createElement } from 'react' 2 | import { ScrollView, StyleSheet, Text, View } from 'react-native' 3 | import Graphic from 'unicon-react' 4 | 5 | import * as Icons from './icons' 6 | 7 | export default class App extends React.Component { 8 | render() { 9 | return ( 10 | 14 | {Object.keys(Icons).map((key) => ( 15 | 16 | 17 | {key} 18 | 19 | ))} 20 | 21 | ) 22 | } 23 | } 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | flex: 1, 28 | paddingTop: 60, 29 | backgroundColor: '#3FA86B', 30 | }, 31 | contentContainer: { 32 | flexWrap: 'wrap', 33 | flexDirection: 'row', 34 | }, 35 | child: { 36 | display: 'flex', 37 | flexDirection: 'column', 38 | flexBasis: '50%', 39 | alignItems: 'center', 40 | justifyContent: 'center', 41 | padding: 16, 42 | }, 43 | }) 44 | -------------------------------------------------------------------------------- /examples/react-native-example/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import App from './App' 3 | 4 | import renderer from 'react-test-renderer' 5 | 6 | it('renders without crashing', () => { 7 | const rendered = renderer.create().toJSON() 8 | expect(rendered).toBeTruthy() 9 | }) 10 | -------------------------------------------------------------------------------- /examples/react-native-example/README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React Native App](https://github.com/react-community/create-react-native-app). 2 | 3 | Below you'll find information about performing common tasks. The most recent version of this guide is available [here](https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md). 4 | 5 | ## Table of Contents 6 | 7 | - [Updating to New Releases](#updating-to-new-releases) 8 | - [Available Scripts](#available-scripts) 9 | - [npm start](#npm-start) 10 | - [npm test](#npm-test) 11 | - [npm run ios](#npm-run-ios) 12 | - [npm run android](#npm-run-android) 13 | - [npm run eject](#npm-run-eject) 14 | - [Writing and Running Tests](#writing-and-running-tests) 15 | - [Environment Variables](#environment-variables) 16 | - [Configuring Packager IP Address](#configuring-packager-ip-address) 17 | - [Customizing App Display Name and Icon](#customizing-app-display-name-and-icon) 18 | - [Sharing and Deployment](#sharing-and-deployment) 19 | - [Publishing to Expo's React Native Community](#publishing-to-expos-react-native-community) 20 | - [Building an Expo "standalone" app](#building-an-expo-standalone-app) 21 | - [Ejecting from Create React Native App](#ejecting-from-create-react-native-app) 22 | - [Build Dependencies (Xcode & Android Studio)](#build-dependencies-xcode-android-studio) 23 | - [Should I Use ExpoKit?](#should-i-use-expokit) 24 | - [Troubleshooting](#troubleshooting) 25 | - [Networking](#networking) 26 | - [iOS Simulator won't open](#ios-simulator-wont-open) 27 | - [QR Code does not scan](#qr-code-does-not-scan) 28 | 29 | ## Updating to New Releases 30 | 31 | You should only need to update the global installation of `create-react-native-app` very rarely, ideally never. 32 | 33 | Updating the `react-native-scripts` dependency of your app should be as simple as bumping the version number in `package.json` and reinstalling your project's dependencies. 34 | 35 | Upgrading to a new version of React Native requires updating the `react-native`, `react`, and `expo` package versions, and setting the correct `sdkVersion` in `app.json`. See the [versioning guide](https://github.com/react-community/create-react-native-app/blob/master/VERSIONS.md) for up-to-date information about package version compatibility. 36 | 37 | ## Available Scripts 38 | 39 | If Yarn was installed when the project was initialized, then dependencies will have been installed via Yarn, and you should probably use it to run these commands as well. Unlike dependency installation, command running syntax is identical for Yarn and NPM at the time of this writing. 40 | 41 | ### `npm start` 42 | 43 | Runs your app in development mode. 44 | 45 | Open it in the [Expo app](https://expo.io) on your phone to view it. It will reload if you save edits to your files, and you will see build errors and logs in the terminal. 46 | 47 | Sometimes you may need to reset or clear the React Native packager's cache. To do so, you can pass the `--reset-cache` flag to the start script: 48 | 49 | ``` 50 | npm start --reset-cache 51 | # or 52 | yarn start --reset-cache 53 | ``` 54 | 55 | #### `npm test` 56 | 57 | Runs the [jest](https://github.com/facebook/jest) test runner on your tests. 58 | 59 | #### `npm run ios` 60 | 61 | Like `npm start`, but also attempts to open your app in the iOS Simulator if you're on a Mac and have it installed. 62 | 63 | #### `npm run android` 64 | 65 | Like `npm start`, but also attempts to open your app on a connected Android device or emulator. Requires an installation of Android build tools (see [React Native docs](https://facebook.github.io/react-native/docs/getting-started.html) for detailed setup). We also recommend installing Genymotion as your Android emulator. Once you've finished setting up the native build environment, there are two options for making the right copy of `adb` available to Create React Native App: 66 | 67 | ##### Using Android Studio's `adb` 68 | 69 | 1. Make sure that you can run adb from your terminal. 70 | 2. Open Genymotion and navigate to `Settings -> ADB`. Select “Use custom Android SDK tools” and update with your [Android SDK directory](https://stackoverflow.com/questions/25176594/android-sdk-location). 71 | 72 | ##### Using Genymotion's `adb` 73 | 74 | 1. Find Genymotion’s copy of adb. On macOS for example, this is normally `/Applications/Genymotion.app/Contents/MacOS/tools/`. 75 | 2. Add the Genymotion tools directory to your path (instructions for [Mac](http://osxdaily.com/2014/08/14/add-new-path-to-path-command-line/), [Linux](http://www.computerhope.com/issues/ch001647.htm), and [Windows](https://www.howtogeek.com/118594/how-to-edit-your-system-path-for-easy-command-line-access/)). 76 | 3. Make sure that you can run adb from your terminal. 77 | 78 | #### `npm run eject` 79 | 80 | This will start the process of "ejecting" from Create React Native App's build scripts. You'll be asked a couple of questions about how you'd like to build your project. 81 | 82 | **Warning:** Running eject is a permanent action (aside from whatever version control system you use). An ejected app will require you to have an [Xcode and/or Android Studio environment](https://facebook.github.io/react-native/docs/getting-started.html) set up. 83 | 84 | ## Customizing App Display Name and Icon 85 | 86 | You can edit `app.json` to include [configuration keys](https://docs.expo.io/versions/latest/guides/configuration.html) under the `expo` key. 87 | 88 | To change your app's display name, set the `expo.name` key in `app.json` to an appropriate string. 89 | 90 | To set an app icon, set the `expo.icon` key in `app.json` to be either a local path or a URL. It's recommended that you use a 512x512 png file with transparency. 91 | 92 | ## Writing and Running Tests 93 | 94 | This project is set up to use [jest](https://facebook.github.io/jest/) for tests. You can configure whatever testing strategy you like, but jest works out of the box. Create test files in directories called `__tests__` or with the `.test` extension to have the files loaded by jest. See the [the template project](https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/App.test.js) for an example test. The [jest documentation](https://facebook.github.io/jest/docs/en/getting-started.html) is also a wonderful resource, as is the [React Native testing tutorial](https://facebook.github.io/jest/docs/en/tutorial-react-native.html). 95 | 96 | ## Environment Variables 97 | 98 | You can configure some of Create React Native App's behavior using environment variables. 99 | 100 | ### Configuring Packager IP Address 101 | 102 | When starting your project, you'll see something like this for your project URL: 103 | 104 | ``` 105 | exp://192.168.0.2:19000 106 | ``` 107 | 108 | The "manifest" at that URL tells the Expo app how to retrieve and load your app's JavaScript bundle, so even if you load it in the app via a URL like `exp://localhost:19000`, the Expo client app will still try to retrieve your app at the IP address that the start script provides. 109 | 110 | In some cases, this is less than ideal. This might be the case if you need to run your project inside of a virtual machine and you have to access the packager via a different IP address than the one which prints by default. In order to override the IP address or hostname that is detected by Create React Native App, you can specify your own hostname via the `REACT_NATIVE_PACKAGER_HOSTNAME` environment variable: 111 | 112 | Mac and Linux: 113 | 114 | ``` 115 | REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname' npm start 116 | ``` 117 | 118 | Windows: 119 | 120 | ``` 121 | set REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname' 122 | npm start 123 | ``` 124 | 125 | The above example would cause the development server to listen on `exp://my-custom-ip-address-or-hostname:19000`. 126 | 127 | ## Sharing and Deployment 128 | 129 | Create React Native App does a lot of work to make app setup and development simple and straightforward, but it's very difficult to do the same for deploying to Apple's App Store or Google's Play Store without relying on a hosted service. 130 | 131 | ### Publishing to Expo's React Native Community 132 | 133 | Expo provides free hosting for the JS-only apps created by CRNA, allowing you to share your app through the Expo client app. This requires registration for an Expo account. 134 | 135 | Install the `exp` command-line tool, and run the publish command: 136 | 137 | ``` 138 | $ npm i -g exp 139 | $ exp publish 140 | ``` 141 | 142 | ### Building an Expo "standalone" app 143 | 144 | You can also use a service like [Expo's standalone builds](https://docs.expo.io/versions/latest/guides/building-standalone-apps.html) if you want to get an IPA/APK for distribution without having to build the native code yourself. 145 | 146 | ### Ejecting from Create React Native App 147 | 148 | If you want to build and deploy your app yourself, you'll need to eject from CRNA and use Xcode and Android Studio. 149 | 150 | This is usually as simple as running `npm run eject` in your project, which will walk you through the process. Make sure to install `react-native-cli` and follow the [native code getting started guide for React Native](https://facebook.github.io/react-native/docs/getting-started.html). 151 | 152 | #### Should I Use ExpoKit? 153 | 154 | If you have made use of Expo APIs while working on your project, then those API calls will stop working if you eject to a regular React Native project. If you want to continue using those APIs, you can eject to "React Native + ExpoKit" which will still allow you to build your own native code and continue using the Expo APIs. See the [ejecting guide](https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md) for more details about this option. 155 | 156 | ## Troubleshooting 157 | 158 | ### Networking 159 | 160 | If you're unable to load your app on your phone due to a network timeout or a refused connection, a good first step is to verify that your phone and computer are on the same network and that they can reach each other. Create React Native App needs access to ports 19000 and 19001 so ensure that your network and firewall settings allow access from your device to your computer on both of these ports. 161 | 162 | Try opening a web browser on your phone and opening the URL that the packager script prints, replacing `exp://` with `http://`. So, for example, if underneath the QR code in your terminal you see: 163 | 164 | ``` 165 | exp://192.168.0.1:19000 166 | ``` 167 | 168 | Try opening Safari or Chrome on your phone and loading 169 | 170 | ``` 171 | http://192.168.0.1:19000 172 | ``` 173 | 174 | and 175 | 176 | ``` 177 | http://192.168.0.1:19001 178 | ``` 179 | 180 | If this works, but you're still unable to load your app by scanning the QR code, please open an issue on the [Create React Native App repository](https://github.com/react-community/create-react-native-app) with details about these steps and any other error messages you may have received. 181 | 182 | If you're not able to load the `http` URL in your phone's web browser, try using the tethering/mobile hotspot feature on your phone (beware of data usage, though), connecting your computer to that WiFi network, and restarting the packager. If you are using a VPN you may need to disable it. 183 | 184 | ### iOS Simulator won't open 185 | 186 | If you're on a Mac, there are a few errors that users sometimes see when attempting to `npm run ios`: 187 | 188 | - "non-zero exit code: 107" 189 | - "You may need to install Xcode" but it is already installed 190 | - and others 191 | 192 | There are a few steps you may want to take to troubleshoot these kinds of errors: 193 | 194 | 1. Make sure Xcode is installed and open it to accept the license agreement if it prompts you. You can install it from the Mac App Store. 195 | 2. Open Xcode's Preferences, the Locations tab, and make sure that the `Command Line Tools` menu option is set to something. Sometimes when the CLI tools are first installed by Homebrew this option is left blank, which can prevent Apple utilities from finding the simulator. Make sure to re-run `npm/yarn run ios` after doing so. 196 | 3. If that doesn't work, open the Simulator, and under the app menu select `Reset Contents and Settings...`. After that has finished, quit the Simulator, and re-run `npm/yarn run ios`. 197 | 198 | ### QR Code does not scan 199 | 200 | If you're not able to scan the QR code, make sure your phone's camera is focusing correctly, and also make sure that the contrast on the two colors in your terminal is high enough. For example, WebStorm's default themes may [not have enough contrast](https://github.com/react-community/create-react-native-app/issues/49) for terminal QR codes to be scannable with the system barcode scanners that the Expo app uses. 201 | 202 | If this causes problems for you, you may want to try changing your terminal's color theme to have more contrast, or running Create React Native App from a different terminal. You can also manually enter the URL printed by the packager script in the Expo app's search bar to load it manually. 203 | -------------------------------------------------------------------------------- /examples/react-native-example/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "sdkVersion": "27.0.0" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /examples/react-native-example/icons.js: -------------------------------------------------------------------------------- 1 | export const Comment = { 2 | width: 27, 3 | height: 23, 4 | children: [ 5 | { 6 | tag: 'g', 7 | props: { id: 'Comment' }, 8 | children: [ 9 | { 10 | tag: 'rect', 11 | props: { 12 | width: '25', 13 | height: '21', 14 | fill: 'black', 15 | fillOpacity: '0', 16 | transform: 'translate(1 1)', 17 | }, 18 | }, 19 | { 20 | tag: 'path', 21 | props: { 22 | id: 'Union', 23 | fillRule: 'evenodd', 24 | clipRule: 'evenodd', 25 | d: 26 | 'M6 1C3.23857 1 1 3.23858 1 6V13C1 15.7614 3.23857 18 6 18H7V22L12.7143 18H21C23.7614 18 26 15.7614 26 13V6C26 3.23858 23.7614 1 21 1H6Z', 27 | fill: 'white', 28 | }, 29 | }, 30 | { 31 | tag: 'circle', 32 | props: { 33 | id: 'Ellipse 4', 34 | cx: '19.5', 35 | cy: '9.5', 36 | r: '1.5', 37 | fill: 'black', 38 | }, 39 | }, 40 | { 41 | tag: 'circle', 42 | props: { 43 | id: 'Ellipse 4_2', 44 | cx: '13.5', 45 | cy: '9.5', 46 | r: '1.5', 47 | fill: 'black', 48 | }, 49 | }, 50 | { 51 | tag: 'circle', 52 | props: { 53 | id: 'Ellipse 4_3', 54 | cx: '7.5', 55 | cy: '9.5', 56 | r: '1.5', 57 | fill: 'black', 58 | }, 59 | }, 60 | { 61 | tag: 'path', 62 | props: { 63 | id: 'Union_2', 64 | d: 65 | 'M7 18H8C8 17.4477 7.55228 17 7 17V18ZM7 22H6C6 22.3729 6.20746 22.7148 6.53819 22.887C6.86892 23.0592 7.26799 23.0331 7.57346 22.8192L7 22ZM12.7143 18V17C12.5091 17 12.3089 17.0631 12.1408 17.1808L12.7143 18ZM2 6C2 3.79086 3.79086 2 6 2V0C2.68629 0 0 2.68629 0 6H2ZM2 13V6H0V13H2ZM6 17C3.79086 17 2 15.2091 2 13H0C0 16.3137 2.68628 19 6 19V17ZM7 17H6V19H7V17ZM8 22V18H6V22H8ZM12.1408 17.1808L6.42654 21.1808L7.57346 22.8192L13.2877 18.8192L12.1408 17.1808ZM21 17H12.7143V19H21V17ZM25 13C25 15.2091 23.2091 17 21 17V19C24.3137 19 27 16.3137 27 13H25ZM25 6V13H27V6H25ZM21 2C23.2091 2 25 3.79086 25 6H27C27 2.68629 24.3137 0 21 0V2ZM6 2H21V0H6V2Z', 66 | fill: 'black', 67 | }, 68 | }, 69 | ], 70 | }, 71 | ], 72 | } 73 | export const Settings = { 74 | width: 26, 75 | height: 26, 76 | children: [ 77 | { 78 | tag: 'g', 79 | props: { id: 'Settings' }, 80 | children: [ 81 | { 82 | tag: 'rect', 83 | props: { 84 | width: '26', 85 | height: '24', 86 | fill: 'black', 87 | fillOpacity: '0', 88 | transform: 'translate(0 1)', 89 | }, 90 | }, 91 | { 92 | tag: 'circle', 93 | props: { id: 'Ellipse 3', cx: '4', cy: '4', r: '2', fill: 'white' }, 94 | }, 95 | { 96 | tag: 'circle', 97 | props: { 98 | id: 'Ellipse 3_2', 99 | cx: '18', 100 | cy: '13', 101 | r: '2', 102 | fill: 'white', 103 | }, 104 | }, 105 | { 106 | tag: 'circle', 107 | props: { 108 | id: 'Ellipse 3_3', 109 | cx: '9', 110 | cy: '22', 111 | r: '2', 112 | fill: 'white', 113 | }, 114 | }, 115 | { 116 | tag: 'circle', 117 | props: { 118 | id: 'Ellipse', 119 | cx: '4', 120 | cy: '4', 121 | r: '3', 122 | stroke: 'black', 123 | strokeWidth: '2', 124 | }, 125 | }, 126 | { 127 | tag: 'line', 128 | props: { 129 | id: 'Line', 130 | x1: '8', 131 | y1: '4', 132 | x2: '24', 133 | y2: '4', 134 | stroke: 'black', 135 | strokeWidth: '2', 136 | strokeLinecap: 'round', 137 | }, 138 | }, 139 | { 140 | tag: 'circle', 141 | props: { 142 | id: 'Ellipse_2', 143 | cx: '9', 144 | cy: '22', 145 | r: '3', 146 | stroke: 'black', 147 | strokeWidth: '2', 148 | }, 149 | }, 150 | { 151 | tag: 'line', 152 | props: { 153 | id: 'Line_2', 154 | x1: '13', 155 | y1: '22', 156 | x2: '24', 157 | y2: '22', 158 | stroke: 'black', 159 | strokeWidth: '2', 160 | strokeLinecap: 'round', 161 | }, 162 | }, 163 | { 164 | tag: 'line', 165 | props: { 166 | id: 'Line_3', 167 | x1: '1', 168 | y1: '22', 169 | x2: '6', 170 | y2: '22', 171 | stroke: 'black', 172 | strokeWidth: '2', 173 | strokeLinecap: 'round', 174 | }, 175 | }, 176 | { 177 | tag: 'circle', 178 | props: { 179 | id: 'Ellipse_3', 180 | cx: '18', 181 | cy: '13', 182 | r: '3', 183 | stroke: 'black', 184 | strokeWidth: '2', 185 | }, 186 | }, 187 | { 188 | tag: 'line', 189 | props: { 190 | id: 'Line_4', 191 | x1: '1', 192 | y1: '13', 193 | x2: '15', 194 | y2: '13', 195 | stroke: 'black', 196 | strokeWidth: '2', 197 | strokeLinecap: 'round', 198 | }, 199 | }, 200 | { 201 | tag: 'line', 202 | props: { 203 | id: 'Line_5', 204 | x1: '22', 205 | y1: '13', 206 | x2: '25', 207 | y2: '13', 208 | stroke: 'black', 209 | strokeWidth: '2', 210 | strokeLinecap: 'round', 211 | }, 212 | }, 213 | ], 214 | }, 215 | ], 216 | } 217 | export const Camera = { 218 | width: 34, 219 | height: 27, 220 | children: [ 221 | { 222 | tag: 'g', 223 | props: { id: 'Camera' }, 224 | children: [ 225 | { 226 | tag: 'rect', 227 | props: { 228 | width: '34.6214', 229 | height: '26.848', 230 | fill: 'black', 231 | fillOpacity: '0', 232 | transform: 'translate(0 0.549654) scale(0.982052)', 233 | }, 234 | }, 235 | { 236 | tag: 'rect', 237 | props: { 238 | id: 'Rectangle 4', 239 | x: '1.9641', 240 | y: '14.1491', 241 | width: '8.83847', 242 | height: '5.89231', 243 | fill: 'white', 244 | }, 245 | }, 246 | { 247 | tag: 'rect', 248 | props: { 249 | id: 'Rectangle 4_2', 250 | x: '21.6051', 251 | y: '14.1491', 252 | width: '2.94616', 253 | height: '5.89231', 254 | fill: 'white', 255 | }, 256 | }, 257 | { 258 | tag: 'rect', 259 | props: { 260 | id: 'Rectangle 5', 261 | x: '15.7128', 262 | y: '6.29266', 263 | width: '5.89231', 264 | height: '0.982052', 265 | fill: 'white', 266 | }, 267 | }, 268 | { 269 | tag: 'line', 270 | props: { 271 | id: 'Line 3', 272 | x1: '27.0648', 273 | y1: '4.1863', 274 | x2: '28.6869', 275 | y2: '0.982266', 276 | stroke: 'white', 277 | strokeWidth: '2', 278 | strokeLinecap: 'round', 279 | }, 280 | }, 281 | { 282 | tag: 'line', 283 | props: { 284 | id: 'Line 3_2', 285 | x1: '29.3484', 286 | y1: '7.99972', 287 | x2: '32.7609', 288 | y2: '6.88107', 289 | stroke: 'white', 290 | strokeWidth: '2', 291 | strokeLinecap: 'round', 292 | }, 293 | }, 294 | { 295 | tag: 'rect', 296 | props: { 297 | id: 'Rectangle 3', 298 | x: '14.7487', 299 | y: '5.32855', 300 | width: '7.82052', 301 | height: '2.91026', 302 | rx: '1', 303 | stroke: 'black', 304 | strokeWidth: '2', 305 | }, 306 | }, 307 | { 308 | tag: 'rect', 309 | props: { 310 | id: 'Rectangle 2', 311 | x: '1', 312 | y: '8.27471', 313 | width: '24.5154', 314 | height: '17.641', 315 | rx: '1', 316 | stroke: 'black', 317 | strokeWidth: '2', 318 | strokeLinejoin: 'round', 319 | }, 320 | }, 321 | { 322 | tag: 'circle', 323 | props: { 324 | id: 'Ellipse 2', 325 | cx: '15.7128', 326 | cy: '17.0952', 327 | r: '5.87436', 328 | stroke: 'black', 329 | strokeWidth: '2', 330 | }, 331 | }, 332 | { 333 | tag: 'circle', 334 | props: { 335 | id: 'Ellipse 2_2', 336 | cx: '15.7128', 337 | cy: '17.0952', 338 | r: '2.92821', 339 | stroke: 'black', 340 | strokeWidth: '2', 341 | }, 342 | }, 343 | { 344 | tag: 'line', 345 | props: { 346 | id: 'Line 2', 347 | x1: '1.9641', 348 | y1: '13.167', 349 | x2: '11.7846', 350 | y2: '13.167', 351 | stroke: 'black', 352 | strokeWidth: '2', 353 | }, 354 | }, 355 | { 356 | tag: 'line', 357 | props: { 358 | id: 'Line 2_2', 359 | x1: '19.641', 360 | y1: '13.167', 361 | x2: '25.5333', 362 | y2: '13.167', 363 | stroke: 'black', 364 | strokeWidth: '2', 365 | }, 366 | }, 367 | { 368 | tag: 'line', 369 | props: { 370 | id: 'Line 2_3', 371 | x1: '1.9641', 372 | y1: '21.0234', 373 | x2: '11.7846', 374 | y2: '21.0234', 375 | stroke: 'black', 376 | strokeWidth: '2', 377 | }, 378 | }, 379 | { 380 | tag: 'line', 381 | props: { 382 | id: 'Line 2_4', 383 | x1: '19.641', 384 | y1: '21.0234', 385 | x2: '25.5333', 386 | y2: '21.0234', 387 | stroke: 'black', 388 | strokeWidth: '2', 389 | }, 390 | }, 391 | ], 392 | }, 393 | ], 394 | } 395 | export const Play = { 396 | width: 28, 397 | height: 21, 398 | children: [ 399 | { 400 | tag: 'g', 401 | props: { id: 'Play' }, 402 | children: [ 403 | { 404 | tag: 'rect', 405 | props: { width: '28', height: '21', fill: 'black', fillOpacity: '0' }, 406 | }, 407 | { 408 | tag: 'rect', 409 | props: { 410 | id: 'Rectangle 9', 411 | x: '2', 412 | y: '2', 413 | width: '24', 414 | height: '3', 415 | fill: 'white', 416 | }, 417 | }, 418 | { 419 | tag: 'rect', 420 | props: { 421 | id: 'Rectangle 9_2', 422 | x: '2', 423 | y: '12', 424 | width: '24', 425 | height: '3', 426 | fill: 'white', 427 | }, 428 | }, 429 | { 430 | tag: 'circle', 431 | props: { id: 'Ellipse 6', cx: '8', cy: '9', r: '2', fill: 'white' }, 432 | }, 433 | { 434 | tag: 'circle', 435 | props: { 436 | id: 'Ellipse 6_2', 437 | cx: '20', 438 | cy: '9', 439 | r: '2', 440 | fill: 'white', 441 | }, 442 | }, 443 | { 444 | tag: 'rect', 445 | props: { 446 | id: 'Rectangle 7', 447 | x: '1', 448 | y: '1', 449 | width: '26', 450 | height: '19', 451 | rx: '1', 452 | stroke: 'black', 453 | strokeWidth: '2', 454 | }, 455 | }, 456 | { 457 | tag: 'path', 458 | props: { 459 | id: 'Rectangle 7_2', 460 | d: 'M6.84713 16L21.1529 16L21.8195 20L6.18046 20L6.84713 16Z', 461 | stroke: 'black', 462 | strokeWidth: '2', 463 | }, 464 | }, 465 | { 466 | tag: 'circle', 467 | props: { 468 | id: 'Ellipse 5', 469 | cx: '8', 470 | cy: '9', 471 | r: '3', 472 | stroke: 'black', 473 | strokeWidth: '2', 474 | }, 475 | }, 476 | { 477 | tag: 'circle', 478 | props: { 479 | id: 'Ellipse 5_2', 480 | cx: '20', 481 | cy: '9', 482 | r: '3', 483 | stroke: 'black', 484 | strokeWidth: '2', 485 | }, 486 | }, 487 | { 488 | tag: 'rect', 489 | props: { 490 | id: 'Rectangle 8', 491 | x: '5', 492 | y: '6', 493 | width: '18', 494 | height: '6', 495 | rx: '3', 496 | stroke: 'black', 497 | strokeWidth: '2', 498 | }, 499 | }, 500 | ], 501 | }, 502 | ], 503 | } 504 | export const NewDoc = { 505 | width: 18, 506 | height: 22, 507 | children: [ 508 | { 509 | tag: 'g', 510 | props: { id: 'New Doc' }, 511 | children: [ 512 | { 513 | tag: 'rect', 514 | props: { width: '18', height: '22', fill: 'black', fillOpacity: '0' }, 515 | }, 516 | { 517 | tag: 'path', 518 | props: { 519 | id: 'Vector 10', 520 | d: 'M1 21V1.5H10.5L17 8V21H1Z', 521 | fill: 'white', 522 | }, 523 | }, 524 | { 525 | tag: 'path', 526 | props: { 527 | id: 'Vector 10_2', 528 | d: 529 | 'M17 8V19C17 20.1046 16.1046 21 15 21H3C1.89543 21 1 20.1046 1 19V3.5C1 2.39543 1.89543 1.5 3 1.5H10.5M17 8L10.5 1.5M17 8H12.5C11.3954 8 10.5 7.10457 10.5 6V1.5', 530 | stroke: 'black', 531 | strokeWidth: '2', 532 | }, 533 | }, 534 | { 535 | tag: 'line', 536 | props: { 537 | id: 'Line 4.1', 538 | x1: '5', 539 | y1: '8', 540 | x2: '7', 541 | y2: '8', 542 | stroke: 'black', 543 | strokeWidth: '2', 544 | strokeLinecap: 'round', 545 | }, 546 | }, 547 | { 548 | tag: 'line', 549 | props: { 550 | id: 'Line 4.2', 551 | x1: '5', 552 | y1: '12', 553 | x2: '13', 554 | y2: '12', 555 | stroke: 'black', 556 | strokeWidth: '2', 557 | strokeLinecap: 'round', 558 | }, 559 | }, 560 | { 561 | tag: 'line', 562 | props: { 563 | id: 'Line 4.3', 564 | x1: '5', 565 | y1: '16', 566 | x2: '13', 567 | y2: '16', 568 | stroke: 'black', 569 | strokeWidth: '2', 570 | strokeLinecap: 'round', 571 | }, 572 | }, 573 | ], 574 | }, 575 | ], 576 | } 577 | export const Save = { 578 | width: 26, 579 | height: 25, 580 | children: [ 581 | { 582 | tag: 'g', 583 | props: { id: 'Save' }, 584 | children: [ 585 | { 586 | tag: 'rect', 587 | props: { width: '26', height: '25', fill: 'black', fillOpacity: '0' }, 588 | }, 589 | { 590 | tag: 'rect', 591 | props: { 592 | id: 'Rectangle 14', 593 | x: '6', 594 | y: '15', 595 | width: '14', 596 | height: '8', 597 | fill: 'white', 598 | }, 599 | }, 600 | { 601 | tag: 'path', 602 | props: { 603 | id: 'Rectangle 11', 604 | d: 605 | 'M24 24H2C1.44771 24 1 23.5523 1 23V2C1 1.44772 1.44772 1 2 1H21.1716C21.4368 1 21.6911 1.10536 21.8787 1.29289L24.7071 4.12132C24.8946 4.30886 25 4.56321 25 4.82843V23C25 23.5523 24.5523 24 24 24Z', 606 | stroke: 'black', 607 | strokeWidth: '2', 608 | }, 609 | }, 610 | { 611 | tag: 'rect', 612 | props: { 613 | id: 'Rectangle 14_2', 614 | x: '5', 615 | y: '14', 616 | width: '16', 617 | height: '10', 618 | stroke: 'black', 619 | strokeWidth: '2', 620 | }, 621 | }, 622 | { 623 | tag: 'path', 624 | props: { 625 | id: 'Subtract', 626 | fillRule: 'evenodd', 627 | clipRule: 'evenodd', 628 | d: 'M20 0H4V11H20V0ZM17 2H13V9H17V2Z', 629 | fill: 'black', 630 | }, 631 | }, 632 | ], 633 | }, 634 | ], 635 | } 636 | export const Profile = { 637 | width: 30, 638 | height: 23, 639 | children: [ 640 | { 641 | tag: 'g', 642 | props: { id: 'Profile' }, 643 | children: [ 644 | { 645 | tag: 'rect', 646 | props: { 647 | width: '29.0483', 648 | height: '22', 649 | fill: 'black', 650 | fillOpacity: '0', 651 | transform: 'translate(0.922664 0.193519) scale(0.969236)', 652 | }, 653 | }, 654 | { 655 | tag: 'path', 656 | props: { 657 | id: 'Subtract', 658 | fillRule: 'evenodd', 659 | clipRule: 'evenodd', 660 | d: 661 | 'M10.6885 15.7013C10.9295 17.882 12.7784 19.5782 15.0234 19.5782C17.2684 19.5782 19.1173 17.882 19.3583 15.7013H10.6885Z', 662 | fill: 'white', 663 | }, 664 | }, 665 | { 666 | tag: 'path', 667 | props: { 668 | id: 'Line 3', 669 | d: 'M4.84643 1.93874L1.93872 0.969502', 670 | stroke: 'white', 671 | strokeWidth: '2', 672 | strokeLinecap: 'round', 673 | }, 674 | }, 675 | { 676 | tag: 'path', 677 | props: { 678 | id: 'Line 3_2', 679 | d: 'M3.7621 8.23877L0.969487 9.35505', 680 | stroke: 'white', 681 | strokeWidth: '2', 682 | strokeLinecap: 'round', 683 | }, 684 | }, 685 | { 686 | tag: 'path', 687 | props: { 688 | id: 'Line 3_3', 689 | d: 'M25.1536 1.93874L28.0613 0.969502', 690 | stroke: 'white', 691 | strokeWidth: '2', 692 | strokeLinecap: 'round', 693 | }, 694 | }, 695 | { 696 | tag: 'path', 697 | props: { 698 | id: 'Line 3_4', 699 | d: 'M26.2379 8.23877L29.0305 9.35505', 700 | stroke: 'white', 701 | strokeWidth: '2', 702 | strokeLinecap: 'round', 703 | }, 704 | }, 705 | { 706 | tag: 'path', 707 | props: { 708 | id: 'Vector 4', 709 | d: 710 | 'M5.81565 21.5167C5.81565 22.052 6.24959 22.4859 6.78489 22.4859C7.32018 22.4859 7.75412 22.052 7.75412 21.5167H5.81565ZM22.2927 21.5167C22.2927 22.052 22.7266 22.4859 23.2619 22.4859C23.7972 22.4859 24.2311 22.052 24.2311 21.5167H22.2927ZM7.75412 21.5167V20.5475H5.81565V21.5167H7.75412ZM12.6003 15.7013H17.4465V13.7628H12.6003V15.7013ZM22.2927 20.5475V21.5167H24.2311V20.5475H22.2927ZM7.75412 20.5475C7.75412 17.871 9.92383 15.7013 12.6003 15.7013V13.7628C8.85324 13.7628 5.81565 16.8004 5.81565 20.5475H7.75412ZM17.4465 15.7013C20.123 15.7013 22.2927 17.871 22.2927 20.5475H24.2311C24.2311 16.8004 21.1935 13.7628 17.4465 13.7628V15.7013Z', 711 | fill: 'black', 712 | }, 713 | }, 714 | { 715 | tag: 'circle', 716 | props: { 717 | id: 'Ellipse 10', 718 | cx: '15.0234', 719 | cy: '6.49355', 720 | r: '5.30003', 721 | stroke: 'black', 722 | strokeWidth: '2', 723 | }, 724 | }, 725 | { 726 | tag: 'rect', 727 | props: { 728 | id: 'Rectangle 17', 729 | x: '12.6311', 730 | y: '11.8551', 731 | width: '4.78465', 732 | height: '2.84618', 733 | stroke: 'black', 734 | strokeWidth: '2', 735 | }, 736 | }, 737 | { 738 | tag: 'path', 739 | props: { 740 | id: 'Vector 3', 741 | d: 742 | 'M9.6926 6.00893L6.42138 13.3692C6.13651 14.0101 6.60568 14.7321 7.30708 14.7321H13.5695', 743 | stroke: 'black', 744 | strokeWidth: '2', 745 | }, 746 | }, 747 | { 748 | tag: 'path', 749 | props: { 750 | id: 'Vector 3_2', 751 | d: 752 | 'M20.3542 6.00893L23.6254 13.3692C23.9103 14.0101 23.4411 14.7321 22.7397 14.7321H16.4772', 753 | stroke: 'black', 754 | strokeWidth: '2', 755 | }, 756 | }, 757 | { 758 | tag: 'path', 759 | props: { 760 | id: 'Vector 2', 761 | d: 762 | 'M21.9372 2.88214C22.3515 2.54317 22.4125 1.93253 22.0736 1.51823C21.7346 1.10394 21.124 1.04287 20.7097 1.38184L21.9372 2.88214ZM10.9457 2.81734C11.7994 3.67106 13.3402 4.65535 15.2804 4.94432C17.2628 5.23956 19.5963 4.79738 21.9372 2.88214L20.7097 1.38184C18.7859 2.95585 17.0002 3.2406 15.566 3.02699C14.0896 2.80711 12.9166 2.04678 12.3164 1.44664L10.9457 2.81734Z', 763 | fill: 'black', 764 | }, 765 | }, 766 | ], 767 | }, 768 | ], 769 | } 770 | export const Send = { 771 | width: 26, 772 | height: 18, 773 | children: [ 774 | { 775 | tag: 'g', 776 | props: { id: 'Send' }, 777 | children: [ 778 | { 779 | tag: 'rect', 780 | props: { width: '26', height: '18', fill: 'black', fillOpacity: '0' }, 781 | }, 782 | { 783 | tag: 'rect', 784 | props: { 785 | id: 'Rectangle 13', 786 | width: '26', 787 | height: '18', 788 | rx: '2', 789 | fill: 'white', 790 | }, 791 | }, 792 | { 793 | tag: 'rect', 794 | props: { 795 | id: 'Rectangle 13_2', 796 | x: '1', 797 | y: '1', 798 | width: '24', 799 | height: '16', 800 | rx: '1', 801 | stroke: 'black', 802 | strokeWidth: '2', 803 | }, 804 | }, 805 | { 806 | tag: 'path', 807 | props: { 808 | id: 'Vector 5', 809 | d: 'M2 2L13 10L24 2', 810 | stroke: 'black', 811 | strokeWidth: '2', 812 | strokeLinejoin: 'round', 813 | }, 814 | }, 815 | { 816 | tag: 'path', 817 | props: { 818 | id: 'Vector 6', 819 | d: 'M15 8L24 16', 820 | stroke: 'black', 821 | strokeWidth: '2', 822 | }, 823 | }, 824 | { 825 | tag: 'path', 826 | props: { 827 | id: 'Vector 6_2', 828 | d: 'M11 8L2 16', 829 | stroke: 'black', 830 | strokeWidth: '2', 831 | }, 832 | }, 833 | ], 834 | }, 835 | ], 836 | } 837 | export const Location = { 838 | width: 32, 839 | height: 21, 840 | children: [ 841 | { 842 | tag: 'g', 843 | props: { id: 'Location' }, 844 | children: [ 845 | { 846 | tag: 'rect', 847 | props: { width: '32', height: '21', fill: 'black', fillOpacity: '0' }, 848 | }, 849 | { 850 | tag: 'rect', 851 | props: { 852 | id: 'Rectangle 19', 853 | x: '15', 854 | y: '17', 855 | width: '3', 856 | height: '2', 857 | fill: 'white', 858 | }, 859 | }, 860 | { 861 | tag: 'rect', 862 | props: { 863 | id: 'Rectangle 20', 864 | x: '12', 865 | y: '2', 866 | width: '9', 867 | height: '1', 868 | fill: 'white', 869 | }, 870 | }, 871 | { 872 | tag: 'path', 873 | props: { 874 | id: 'Rectangle 16', 875 | d: 876 | 'M11 2C11 1.44772 11.4477 1 12 1H21C21.5523 1 22 1.44772 22 2V20H11V2Z', 877 | stroke: 'black', 878 | strokeWidth: '2', 879 | }, 880 | }, 881 | { 882 | tag: 'path', 883 | props: { 884 | id: 'Rectangle 16_2', 885 | d: 886 | 'M1 8C1 7.44772 1.44772 7 2 7H11V20H2C1.44772 20 1 19.5523 1 19V8Z', 887 | stroke: 'black', 888 | strokeWidth: '2', 889 | }, 890 | }, 891 | { 892 | tag: 'path', 893 | props: { 894 | id: 'Rectangle 16_3', 895 | d: 896 | 'M22 11H30C30.5523 11 31 11.4477 31 12V19C31 19.5523 30.5523 20 30 20H22V11Z', 897 | stroke: 'black', 898 | strokeWidth: '2', 899 | }, 900 | }, 901 | { 902 | tag: 'line', 903 | props: { 904 | id: 'Line 5', 905 | x1: '12', 906 | y1: '4', 907 | x2: '21', 908 | y2: '4', 909 | stroke: 'black', 910 | strokeWidth: '2', 911 | }, 912 | }, 913 | { 914 | tag: 'line', 915 | props: { 916 | id: 'Line 6', 917 | x1: '15', 918 | y1: '7', 919 | x2: '15', 920 | y2: '9', 921 | stroke: 'black', 922 | strokeWidth: '2', 923 | }, 924 | }, 925 | { 926 | tag: 'line', 927 | props: { 928 | id: 'Line 6_2', 929 | x1: '4', 930 | y1: '10', 931 | x2: '4', 932 | y2: '12', 933 | stroke: 'black', 934 | strokeWidth: '2', 935 | }, 936 | }, 937 | { 938 | tag: 'line', 939 | props: { 940 | id: 'Line 6_3', 941 | x1: '8', 942 | y1: '10', 943 | x2: '8', 944 | y2: '12', 945 | stroke: 'black', 946 | strokeWidth: '2', 947 | }, 948 | }, 949 | { 950 | tag: 'line', 951 | props: { 952 | id: 'Line 6_4', 953 | x1: '4', 954 | y1: '14', 955 | x2: '4', 956 | y2: '16', 957 | stroke: 'black', 958 | strokeWidth: '2', 959 | }, 960 | }, 961 | { 962 | tag: 'line', 963 | props: { 964 | id: 'Line 6_5', 965 | x1: '8', 966 | y1: '14', 967 | x2: '8', 968 | y2: '16', 969 | stroke: 'black', 970 | strokeWidth: '2', 971 | }, 972 | }, 973 | { 974 | tag: 'line', 975 | props: { 976 | id: 'Line 6_6', 977 | x1: '6', 978 | y1: '17', 979 | x2: '6', 980 | y2: '19', 981 | stroke: 'black', 982 | strokeWidth: '2', 983 | }, 984 | }, 985 | { 986 | tag: 'line', 987 | props: { 988 | id: 'Line 6_7', 989 | x1: '18', 990 | y1: '7', 991 | x2: '18', 992 | y2: '9', 993 | stroke: 'black', 994 | strokeWidth: '2', 995 | }, 996 | }, 997 | { 998 | tag: 'line', 999 | props: { 1000 | id: 'Line 6_8', 1001 | x1: '15', 1002 | y1: '11', 1003 | x2: '15', 1004 | y2: '13', 1005 | stroke: 'black', 1006 | strokeWidth: '2', 1007 | }, 1008 | }, 1009 | { 1010 | tag: 'line', 1011 | props: { 1012 | id: 'Line 6_9', 1013 | x1: '18', 1014 | y1: '11', 1015 | x2: '18', 1016 | y2: '13', 1017 | stroke: 'black', 1018 | strokeWidth: '2', 1019 | }, 1020 | }, 1021 | { 1022 | tag: 'rect', 1023 | props: { 1024 | id: 'Rectangle 18', 1025 | x: '14', 1026 | y: '16', 1027 | width: '5', 1028 | height: '4', 1029 | stroke: 'black', 1030 | strokeWidth: '2', 1031 | }, 1032 | }, 1033 | { 1034 | tag: 'line', 1035 | props: { 1036 | id: 'Line 7', 1037 | x1: '24', 1038 | y1: '14', 1039 | x2: '29', 1040 | y2: '14', 1041 | stroke: 'black', 1042 | strokeWidth: '2', 1043 | }, 1044 | }, 1045 | { 1046 | tag: 'line', 1047 | props: { 1048 | id: 'Line 8', 1049 | x1: '25', 1050 | y1: '17', 1051 | x2: '25', 1052 | y2: '20', 1053 | stroke: 'black', 1054 | strokeWidth: '2', 1055 | }, 1056 | }, 1057 | { 1058 | tag: 'line', 1059 | props: { 1060 | id: 'Line 8_2', 1061 | x1: '28', 1062 | y1: '17', 1063 | x2: '28', 1064 | y2: '20', 1065 | stroke: 'black', 1066 | strokeWidth: '2', 1067 | }, 1068 | }, 1069 | ], 1070 | }, 1071 | ], 1072 | } 1073 | export const Like = { 1074 | width: 31, 1075 | height: 27, 1076 | children: [ 1077 | { 1078 | tag: 'g', 1079 | props: { id: 'Like' }, 1080 | children: [ 1081 | { 1082 | tag: 'rect', 1083 | props: { 1084 | width: '30.0483', 1085 | height: '25', 1086 | fill: 'black', 1087 | fillOpacity: '0', 1088 | transform: 'translate(0.923595 0.970198) scale(0.970198)', 1089 | }, 1090 | }, 1091 | { 1092 | tag: 'path', 1093 | props: { 1094 | id: 'Rectangle 22', 1095 | d: 1096 | 'M11.6426 15.5232V9.70198C11.6426 8.63033 12.5114 7.76159 13.583 7.76159V7.76159C14.6547 7.76159 15.5234 8.63033 15.5234 9.70198L15.5234 13.7984', 1097 | stroke: 'black', 1098 | strokeWidth: '2', 1099 | }, 1100 | }, 1101 | { 1102 | tag: 'path', 1103 | props: { 1104 | id: 'Rectangle 22_2', 1105 | d: 1106 | 'M11.6426 11.1573V4.85099C11.6426 3.77934 10.7739 2.91059 9.70225 2.91059V2.91059C8.6306 2.91059 7.76185 3.77934 7.76185 4.85099L7.76185 17.4636C7.76185 21.7502 11.2368 25.2252 15.5234 25.2252V25.2252C19.81 25.2252 23.285 21.7502 23.285 17.4636V14.553', 1107 | stroke: 'black', 1108 | strokeWidth: '2', 1109 | }, 1110 | }, 1111 | { 1112 | tag: 'path', 1113 | props: { 1114 | id: 'Rectangle 22_3', 1115 | d: 1116 | 'M15.5234 14.553V9.70198C15.5234 8.63033 16.3922 7.76159 17.4638 7.76159V7.76159C18.5355 7.76159 19.4042 8.63033 19.4042 9.70198L19.4042 13.0438', 1117 | stroke: 'black', 1118 | strokeWidth: '2', 1119 | }, 1120 | }, 1121 | { 1122 | tag: 'path', 1123 | props: { 1124 | id: 'Rectangle 22_4', 1125 | d: 1126 | 'M19.4042 17.4636H13.583C12.5114 17.4636 11.6426 16.5948 11.6426 15.5232V15.5232C11.6426 14.4515 12.5114 13.5828 13.583 13.5828L19.4042 13.5828C21.5475 13.5828 23.285 15.3203 23.285 17.4636V17.4636', 1127 | stroke: 'black', 1128 | strokeWidth: '2', 1129 | strokeLinecap: 'round', 1130 | }, 1131 | }, 1132 | { 1133 | tag: 'path', 1134 | props: { 1135 | id: 'Rectangle 22_5', 1136 | d: 1137 | 'M19.4042 9.70198V2.91059C19.4042 1.83894 20.273 0.970198 21.3446 0.970198V0.970198C22.4163 0.970198 23.285 1.83894 23.285 2.91059V15.5232', 1138 | stroke: 'black', 1139 | strokeWidth: '2', 1140 | }, 1141 | }, 1142 | { 1143 | tag: 'path', 1144 | props: { 1145 | id: 'Vector 8', 1146 | d: 1147 | 'M17.4638 21.3444C17.4638 21.8802 17.0295 22.3146 16.4936 22.3146C15.9578 22.3146 15.5234 21.8802 15.5234 21.3444H17.4638ZM17.4638 20.3742V21.3444H15.5234V20.3742H17.4638ZM19.4042 18.4338C18.3326 18.4338 17.4638 19.3025 17.4638 20.3742H15.5234C15.5234 18.2309 17.2609 16.4934 19.4042 16.4934V18.4338Z', 1148 | fill: 'black', 1149 | }, 1150 | }, 1151 | { 1152 | tag: 'path', 1153 | props: { 1154 | id: 'Line 3', 1155 | d: 'M3.88106 5.82119L0.970465 4.85099', 1156 | stroke: 'white', 1157 | strokeWidth: '2', 1158 | strokeLinecap: 'round', 1159 | }, 1160 | }, 1161 | { 1162 | tag: 'path', 1163 | props: { 1164 | id: 'Line 3_2', 1165 | d: 'M3.76585 12.1275L0.970465 13.2449', 1166 | stroke: 'white', 1167 | strokeWidth: '2', 1168 | strokeLinecap: 'round', 1169 | }, 1170 | }, 1171 | { 1172 | tag: 'path', 1173 | props: { 1174 | id: 'Line 3_3', 1175 | d: 'M27.1189 5.82119L30.0295 4.85099', 1176 | stroke: 'white', 1177 | strokeWidth: '2', 1178 | strokeLinecap: 'round', 1179 | }, 1180 | }, 1181 | { 1182 | tag: 'path', 1183 | props: { 1184 | id: 'Line 3_4', 1185 | d: 'M27.2342 12.1275L30.0295 13.2449', 1186 | stroke: 'white', 1187 | strokeWidth: '2', 1188 | strokeLinecap: 'round', 1189 | }, 1190 | }, 1191 | ], 1192 | }, 1193 | ], 1194 | } 1195 | export const GridView = { 1196 | width: 26, 1197 | height: 26, 1198 | children: [ 1199 | { 1200 | tag: 'g', 1201 | props: { id: 'Grid View' }, 1202 | children: [ 1203 | { 1204 | tag: 'rect', 1205 | props: { 1206 | width: '24', 1207 | height: '24', 1208 | fill: 'black', 1209 | fillOpacity: '0', 1210 | transform: 'translate(1 1)', 1211 | }, 1212 | }, 1213 | { 1214 | tag: 'rect', 1215 | props: { 1216 | id: 'Rectangle 24', 1217 | x: '1', 1218 | y: '1', 1219 | width: '10', 1220 | height: '10', 1221 | fill: 'white', 1222 | }, 1223 | }, 1224 | { 1225 | tag: 'rect', 1226 | props: { 1227 | id: 'Rectangle 24_2', 1228 | x: '1', 1229 | y: '15', 1230 | width: '10', 1231 | height: '10', 1232 | fill: 'white', 1233 | }, 1234 | }, 1235 | { 1236 | tag: 'rect', 1237 | props: { 1238 | id: 'Rectangle 24_3', 1239 | x: '15', 1240 | y: '1', 1241 | width: '10', 1242 | height: '10', 1243 | fill: 'white', 1244 | }, 1245 | }, 1246 | { 1247 | tag: 'rect', 1248 | props: { 1249 | id: 'Rectangle 24_4', 1250 | x: '15', 1251 | y: '15', 1252 | width: '10', 1253 | height: '10', 1254 | fill: 'white', 1255 | }, 1256 | }, 1257 | { 1258 | tag: 'rect', 1259 | props: { 1260 | id: 'Rectangle 24_5', 1261 | x: '1', 1262 | y: '1', 1263 | width: '10', 1264 | height: '10', 1265 | stroke: 'black', 1266 | strokeWidth: '2', 1267 | }, 1268 | }, 1269 | { 1270 | tag: 'rect', 1271 | props: { 1272 | id: 'Rectangle 24_6', 1273 | x: '1', 1274 | y: '15', 1275 | width: '10', 1276 | height: '10', 1277 | stroke: 'black', 1278 | strokeWidth: '2', 1279 | }, 1280 | }, 1281 | { 1282 | tag: 'rect', 1283 | props: { 1284 | id: 'Rectangle 24_7', 1285 | x: '15', 1286 | y: '1', 1287 | width: '10', 1288 | height: '10', 1289 | stroke: 'black', 1290 | strokeWidth: '2', 1291 | }, 1292 | }, 1293 | { 1294 | tag: 'rect', 1295 | props: { 1296 | id: 'Rectangle 24_8', 1297 | x: '15', 1298 | y: '15', 1299 | width: '10', 1300 | height: '10', 1301 | stroke: 'black', 1302 | strokeWidth: '2', 1303 | }, 1304 | }, 1305 | ], 1306 | }, 1307 | ], 1308 | } 1309 | export const Review = { 1310 | width: 30, 1311 | height: 25, 1312 | children: [ 1313 | { 1314 | tag: 'g', 1315 | props: { id: 'Review' }, 1316 | children: [ 1317 | { 1318 | tag: 'rect', 1319 | props: { 1320 | width: '28', 1321 | height: '24', 1322 | fill: 'black', 1323 | fillOpacity: '0', 1324 | transform: 'translate(1.1667) scale(0.988093)', 1325 | }, 1326 | }, 1327 | { 1328 | tag: 'path', 1329 | props: { 1330 | id: 'Ellipse 9', 1331 | d: 1332 | 'M27.8452 15.8095C27.8452 16.7976 22.0942 23.7142 15 23.7142C7.90579 23.7142 2.15479 16.7976 2.15479 15.8095C2.15479 14.8214 7.90579 7.90475 15 7.90475C22.0942 7.90475 27.8452 14.8214 27.8452 15.8095Z', 1333 | stroke: 'black', 1334 | strokeWidth: '2', 1335 | }, 1336 | }, 1337 | { 1338 | tag: 'circle', 1339 | props: { 1340 | id: 'Ellipse 11', 1341 | cx: '15', 1342 | cy: '13.8333', 1343 | r: '5.92856', 1344 | stroke: 'black', 1345 | strokeWidth: '2', 1346 | }, 1347 | }, 1348 | { 1349 | tag: 'circle', 1350 | props: { 1351 | id: 'Ellipse 11_2', 1352 | cx: '15', 1353 | cy: '13.8333', 1354 | r: '2.96428', 1355 | fill: 'black', 1356 | }, 1357 | }, 1358 | { 1359 | tag: 'line', 1360 | props: { 1361 | id: 'Line 9', 1362 | x1: '15', 1363 | y1: '3.95237', 1364 | x2: '15', 1365 | y2: '0.988093', 1366 | stroke: 'white', 1367 | strokeWidth: '2', 1368 | strokeLinecap: 'round', 1369 | }, 1370 | }, 1371 | { 1372 | tag: 'line', 1373 | props: { 1374 | id: 'Line 9_2', 1375 | x1: '8.56361', 1376 | y1: '5.0337', 1377 | x2: '7.51067', 1378 | y2: '2.26273', 1379 | stroke: 'white', 1380 | strokeWidth: '2', 1381 | strokeLinecap: 'round', 1382 | }, 1383 | }, 1384 | { 1385 | tag: 'line', 1386 | props: { 1387 | id: 'Line 9_3', 1388 | x1: '2.7992', 1389 | y1: '8.6731', 1390 | x2: '0.988144', 1391 | y2: '6.32639', 1392 | stroke: 'white', 1393 | strokeWidth: '2', 1394 | strokeLinecap: 'round', 1395 | }, 1396 | }, 1397 | { 1398 | tag: 'line', 1399 | props: { 1400 | id: 'Line 9_4', 1401 | x1: '21.4364', 1402 | y1: '5.0337', 1403 | x2: '22.4893', 1404 | y2: '2.26273', 1405 | stroke: 'white', 1406 | strokeWidth: '2', 1407 | strokeLinecap: 'round', 1408 | }, 1409 | }, 1410 | { 1411 | tag: 'line', 1412 | props: { 1413 | id: 'Line 9_5', 1414 | x1: '27.2008', 1415 | y1: '8.6731', 1416 | x2: '29.0119', 1417 | y2: '6.32639', 1418 | stroke: 'white', 1419 | strokeWidth: '2', 1420 | strokeLinecap: 'round', 1421 | }, 1422 | }, 1423 | ], 1424 | }, 1425 | ], 1426 | } 1427 | export const Delete = { 1428 | width: 26, 1429 | height: 26, 1430 | children: [ 1431 | { 1432 | tag: 'g', 1433 | props: { id: 'Delete' }, 1434 | children: [ 1435 | { 1436 | tag: 'rect', 1437 | props: { 1438 | width: '24', 1439 | height: '24', 1440 | fill: 'black', 1441 | fillOpacity: '0', 1442 | transform: 'translate(1 1)', 1443 | }, 1444 | }, 1445 | { 1446 | tag: 'path', 1447 | props: { 1448 | id: 'Line 10', 1449 | d: 'M8 18L18 8', 1450 | stroke: 'black', 1451 | strokeWidth: '2', 1452 | strokeLinecap: 'round', 1453 | }, 1454 | }, 1455 | { 1456 | tag: 'path', 1457 | props: { 1458 | id: 'Line 11', 1459 | d: 'M8 8L18 18', 1460 | stroke: 'black', 1461 | strokeWidth: '2', 1462 | strokeLinecap: 'round', 1463 | }, 1464 | }, 1465 | { 1466 | tag: 'circle', 1467 | props: { 1468 | id: 'Ellipse 12', 1469 | cx: '13', 1470 | cy: '13', 1471 | r: '12', 1472 | stroke: 'white', 1473 | strokeWidth: '2', 1474 | }, 1475 | }, 1476 | ], 1477 | }, 1478 | ], 1479 | } 1480 | export const Reply = { 1481 | width: 27, 1482 | height: 19, 1483 | children: [ 1484 | { 1485 | tag: 'g', 1486 | props: { id: 'Reply' }, 1487 | children: [ 1488 | { 1489 | tag: 'rect', 1490 | props: { 1491 | width: '26', 1492 | height: '17.5', 1493 | fill: 'black', 1494 | fillOpacity: '0', 1495 | transform: 'translate(0.964286 0.482158) scale(0.964286)', 1496 | }, 1497 | }, 1498 | { 1499 | tag: 'path', 1500 | props: { 1501 | id: 'Rectangle 25', 1502 | d: 'M12.5357 0.9643L20.25 7.7143L12.5357 14.4643', 1503 | stroke: 'black', 1504 | strokeWidth: '2', 1505 | strokeLinecap: 'round', 1506 | strokeLinejoin: 'round', 1507 | }, 1508 | }, 1509 | { 1510 | tag: 'path', 1511 | props: { 1512 | id: 'Vector 7', 1513 | d: 1514 | 'M0 17.3572C0 17.8897 0.431725 18.3214 0.964286 18.3214C1.49685 18.3214 1.92857 17.8897 1.92857 17.3572H0ZM20.25 6.75002H8.67857V8.67859H20.25V6.75002ZM0 15.4286V17.3572H1.92857V15.4286H0ZM8.67857 6.75002C3.88553 6.75002 0 10.6355 0 15.4286H1.92857C1.92857 11.7007 4.95065 8.67859 8.67857 8.67859V6.75002Z', 1515 | fill: 'black', 1516 | }, 1517 | }, 1518 | { 1519 | tag: 'path', 1520 | props: { 1521 | id: 'Rectangle 25_2', 1522 | d: 'M18.3214 0.9643L26.0357 7.7143L18.3214 14.4643', 1523 | stroke: 'white', 1524 | strokeWidth: '2', 1525 | strokeLinecap: 'round', 1526 | strokeLinejoin: 'round', 1527 | }, 1528 | }, 1529 | ], 1530 | }, 1531 | ], 1532 | } 1533 | export const ListView = { 1534 | width: 24, 1535 | height: 22, 1536 | children: [ 1537 | { 1538 | tag: 'g', 1539 | props: { id: 'List View' }, 1540 | children: [ 1541 | { 1542 | tag: 'rect', 1543 | props: { 1544 | width: '23', 1545 | height: '20', 1546 | fill: 'black', 1547 | fillOpacity: '0', 1548 | transform: 'translate(1 1)', 1549 | }, 1550 | }, 1551 | { 1552 | tag: 'circle', 1553 | props: { id: 'Ellipse 13', cx: '3', cy: '3', r: '2', fill: 'white' }, 1554 | }, 1555 | { 1556 | tag: 'circle', 1557 | props: { 1558 | id: 'Ellipse 13_2', 1559 | cx: '3', 1560 | cy: '11', 1561 | r: '2', 1562 | fill: 'white', 1563 | }, 1564 | }, 1565 | { 1566 | tag: 'circle', 1567 | props: { 1568 | id: 'Ellipse 13_3', 1569 | cx: '3', 1570 | cy: '19', 1571 | r: '2', 1572 | fill: 'white', 1573 | }, 1574 | }, 1575 | { 1576 | tag: 'circle', 1577 | props: { 1578 | id: 'Ellipse 13_4', 1579 | cx: '3', 1580 | cy: '3', 1581 | r: '2', 1582 | stroke: 'black', 1583 | strokeWidth: '2', 1584 | }, 1585 | }, 1586 | { 1587 | tag: 'line', 1588 | props: { 1589 | id: 'Line 12', 1590 | x1: '9', 1591 | y1: '3', 1592 | x2: '23', 1593 | y2: '3', 1594 | stroke: 'black', 1595 | strokeWidth: '2', 1596 | strokeLinecap: 'round', 1597 | }, 1598 | }, 1599 | { 1600 | tag: 'circle', 1601 | props: { 1602 | id: 'Ellipse 13_5', 1603 | cx: '3', 1604 | cy: '11', 1605 | r: '2', 1606 | stroke: 'black', 1607 | strokeWidth: '2', 1608 | }, 1609 | }, 1610 | { 1611 | tag: 'line', 1612 | props: { 1613 | id: 'Line 12_2', 1614 | x1: '9', 1615 | y1: '11', 1616 | x2: '23', 1617 | y2: '11', 1618 | stroke: 'black', 1619 | strokeWidth: '2', 1620 | strokeLinecap: 'round', 1621 | }, 1622 | }, 1623 | { 1624 | tag: 'circle', 1625 | props: { 1626 | id: 'Ellipse 13_6', 1627 | cx: '3', 1628 | cy: '19', 1629 | r: '2', 1630 | stroke: 'black', 1631 | strokeWidth: '2', 1632 | }, 1633 | }, 1634 | { 1635 | tag: 'line', 1636 | props: { 1637 | id: 'Line 12_3', 1638 | x1: '9', 1639 | y1: '19', 1640 | x2: '23', 1641 | y2: '19', 1642 | stroke: 'black', 1643 | strokeWidth: '2', 1644 | strokeLinecap: 'round', 1645 | }, 1646 | }, 1647 | ], 1648 | }, 1649 | ], 1650 | } 1651 | export const Restore = { 1652 | width: 25, 1653 | height: 22, 1654 | children: [ 1655 | { 1656 | tag: 'g', 1657 | props: { id: 'Restore' }, 1658 | children: [ 1659 | { 1660 | tag: 'rect', 1661 | props: { 1662 | width: '23', 1663 | height: '20', 1664 | fill: 'black', 1665 | fillOpacity: '0', 1666 | transform: 'translate(1 1)', 1667 | }, 1668 | }, 1669 | { 1670 | tag: 'path', 1671 | props: { 1672 | id: 'Vector', 1673 | d: 1674 | 'M21 11C21 16.5 16.5 21 11 21C5.5 21 1 16.5 1 11C1 5.5 5.5 1 11 1C13.8 1 16.3 2.1 18.1 3.9', 1675 | stroke: 'black', 1676 | strokeWidth: '2', 1677 | strokeMiterlimit: '10', 1678 | strokeLinecap: 'round', 1679 | strokeLinejoin: 'round', 1680 | }, 1681 | }, 1682 | { 1683 | tag: 'path', 1684 | props: { 1685 | id: 'Vector_2', 1686 | d: 'M18 12L21 9L24 12', 1687 | stroke: 'black', 1688 | strokeWidth: '2', 1689 | strokeMiterlimit: '10', 1690 | strokeLinecap: 'round', 1691 | strokeLinejoin: 'round', 1692 | }, 1693 | }, 1694 | { 1695 | tag: 'circle', 1696 | props: { 1697 | id: 'Ellipse 14', 1698 | cx: '11', 1699 | cy: '11', 1700 | r: '3', 1701 | fill: 'white', 1702 | }, 1703 | }, 1704 | ], 1705 | }, 1706 | ], 1707 | } 1708 | export const Duplicate = { 1709 | width: 22, 1710 | height: 26, 1711 | children: [ 1712 | { 1713 | tag: 'g', 1714 | props: { id: 'Duplicate' }, 1715 | children: [ 1716 | { 1717 | tag: 'rect', 1718 | props: { 1719 | width: '21', 1720 | height: '25', 1721 | fill: 'black', 1722 | fillOpacity: '0', 1723 | transform: 'translate(1)', 1724 | }, 1725 | }, 1726 | { 1727 | tag: 'path', 1728 | props: { 1729 | id: 'Vector 9', 1730 | d: 'M1 5V23C1 24.1046 1.89543 25 3 25H17', 1731 | stroke: 'black', 1732 | strokeWidth: '2', 1733 | strokeLinecap: 'round', 1734 | }, 1735 | }, 1736 | { 1737 | tag: 'path', 1738 | props: { 1739 | id: 'Vector 10', 1740 | d: 'M5 21V1.5H14.5L21 8V21H5Z', 1741 | fill: 'white', 1742 | }, 1743 | }, 1744 | { 1745 | tag: 'path', 1746 | props: { 1747 | id: 'Vector 10_2', 1748 | d: 1749 | 'M21 8V19C21 20.1046 20.1046 21 19 21H7C5.89543 21 5 20.1046 5 19V3.5C5 2.39543 5.89543 1.5 7 1.5H14.5M21 8L14.5 1.5M21 8H16.5C15.3954 8 14.5 7.10457 14.5 6V1.5', 1750 | stroke: 'black', 1751 | strokeWidth: '2', 1752 | }, 1753 | }, 1754 | { 1755 | tag: 'line', 1756 | props: { 1757 | id: 'Line 4', 1758 | x1: '9', 1759 | y1: '8', 1760 | x2: '11', 1761 | y2: '8', 1762 | stroke: 'black', 1763 | strokeWidth: '2', 1764 | strokeLinecap: 'round', 1765 | }, 1766 | }, 1767 | { 1768 | tag: 'line', 1769 | props: { 1770 | id: 'Line 4_2', 1771 | x1: '9', 1772 | y1: '12', 1773 | x2: '17', 1774 | y2: '12', 1775 | stroke: 'black', 1776 | strokeWidth: '2', 1777 | strokeLinecap: 'round', 1778 | }, 1779 | }, 1780 | { 1781 | tag: 'line', 1782 | props: { 1783 | id: 'Line 4_3', 1784 | x1: '9', 1785 | y1: '16', 1786 | x2: '17', 1787 | y2: '16', 1788 | stroke: 'black', 1789 | strokeWidth: '2', 1790 | strokeLinecap: 'round', 1791 | }, 1792 | }, 1793 | ], 1794 | }, 1795 | ], 1796 | } 1797 | export const Pause = { 1798 | width: 18, 1799 | height: 16, 1800 | children: [ 1801 | { 1802 | tag: 'g', 1803 | props: { id: 'Pause' }, 1804 | children: [ 1805 | { 1806 | tag: 'rect', 1807 | props: { width: '18', height: '16', fill: 'black', fillOpacity: '0' }, 1808 | }, 1809 | { 1810 | tag: 'rect', 1811 | props: { 1812 | id: 'Rectangle 26', 1813 | x: '3', 1814 | y: '3', 1815 | width: '2', 1816 | height: '10', 1817 | fill: 'white', 1818 | }, 1819 | }, 1820 | { 1821 | tag: 'rect', 1822 | props: { 1823 | id: 'Rectangle 26_2', 1824 | x: '13', 1825 | y: '3', 1826 | width: '2', 1827 | height: '10', 1828 | fill: 'white', 1829 | }, 1830 | }, 1831 | { 1832 | tag: 'rect', 1833 | props: { 1834 | id: 'Rectangle 21', 1835 | x: '1', 1836 | y: '1', 1837 | width: '6', 1838 | height: '14', 1839 | rx: '1', 1840 | stroke: 'black', 1841 | strokeWidth: '2', 1842 | strokeLinejoin: 'round', 1843 | }, 1844 | }, 1845 | { 1846 | tag: 'rect', 1847 | props: { 1848 | id: 'Rectangle 21_2', 1849 | x: '11', 1850 | y: '1', 1851 | width: '6', 1852 | height: '14', 1853 | rx: '1', 1854 | stroke: 'black', 1855 | strokeWidth: '2', 1856 | strokeLinejoin: 'round', 1857 | }, 1858 | }, 1859 | ], 1860 | }, 1861 | ], 1862 | } 1863 | export const Stop = { 1864 | width: 16, 1865 | height: 16, 1866 | children: [ 1867 | { 1868 | tag: 'g', 1869 | props: { id: 'Stop' }, 1870 | children: [ 1871 | { 1872 | tag: 'rect', 1873 | props: { width: '16', height: '16', fill: 'black', fillOpacity: '0' }, 1874 | }, 1875 | { 1876 | tag: 'rect', 1877 | props: { 1878 | id: 'Rectangle 21', 1879 | x: '1', 1880 | y: '1', 1881 | width: '14', 1882 | height: '14', 1883 | rx: '1', 1884 | stroke: 'black', 1885 | strokeWidth: '2', 1886 | strokeLinejoin: 'round', 1887 | }, 1888 | }, 1889 | { 1890 | tag: 'rect', 1891 | props: { 1892 | id: 'Rectangle 27', 1893 | x: '4', 1894 | y: '4', 1895 | width: '8', 1896 | height: '8', 1897 | fill: 'white', 1898 | }, 1899 | }, 1900 | ], 1901 | }, 1902 | ], 1903 | } 1904 | export const VolumeHigh = { 1905 | width: 31, 1906 | height: 24, 1907 | children: [ 1908 | { 1909 | tag: 'g', 1910 | props: { id: 'Volume High' }, 1911 | children: [ 1912 | { 1913 | tag: 'rect', 1914 | props: { 1915 | width: '29', 1916 | height: '22', 1917 | fill: 'black', 1918 | fillOpacity: '0', 1919 | transform: 'translate(1 1)', 1920 | }, 1921 | }, 1922 | { 1923 | tag: 'path', 1924 | props: { 1925 | id: 'Vector 10', 1926 | d: 1927 | 'M6 7V8C6.19742 8 6.39043 7.94156 6.5547 7.83205L6 7ZM6 17L6.5547 16.1679C6.39043 16.0584 6.19742 16 6 16V17ZM2 15V9H0V15H2ZM3 8H6V6H3V8ZM6.5547 7.83205L14 2.86852L12.8906 1.20442L5.4453 6.16795L6.5547 7.83205ZM14 2.86852V21.1315H16V2.86852H14ZM14 21.1315L6.5547 16.1679L5.4453 17.8321L12.8906 22.7956L14 21.1315ZM6 16H3V18H6V16ZM0 15C0 16.6569 1.34315 18 3 18V16C2.44772 16 2 15.5523 2 15H0ZM2 9C2 8.44772 2.44772 8 3 8V6C1.34315 6 0 7.34315 0 9H2ZM14 2.86852H16C16 1.27113 14.2197 0.318344 12.8906 1.20442L14 2.86852ZM14 21.1315L12.8906 22.7956C14.2197 23.6817 16 22.7289 16 21.1315H14Z', 1928 | fill: 'black', 1929 | }, 1930 | }, 1931 | { 1932 | tag: 'line', 1933 | props: { 1934 | id: 'Line 13', 1935 | x1: '6', 1936 | y1: '17', 1937 | x2: '6', 1938 | y2: '7', 1939 | stroke: 'black', 1940 | strokeWidth: '2', 1941 | strokeLinecap: 'round', 1942 | }, 1943 | }, 1944 | { 1945 | tag: 'path', 1946 | props: { 1947 | id: 'Ellipse 15', 1948 | d: 'M19 15C20.6569 15 22 13.6569 22 12C22 10.3431 20.6569 9 19 9', 1949 | stroke: 'white', 1950 | strokeWidth: '2', 1951 | strokeLinecap: 'round', 1952 | }, 1953 | }, 1954 | { 1955 | tag: 'path', 1956 | props: { 1957 | id: 'Ellipse 15_2', 1958 | d: 'M19 19C22.866 19 26 15.866 26 12C26 8.13401 22.866 5 19 5', 1959 | stroke: 'white', 1960 | strokeWidth: '2', 1961 | strokeLinecap: 'round', 1962 | }, 1963 | }, 1964 | { 1965 | tag: 'path', 1966 | props: { 1967 | id: 'Ellipse 15_3', 1968 | d: 'M19 23C25.0751 23 30 18.0751 30 12C30 5.92487 25.0751 1 19 1', 1969 | stroke: 'white', 1970 | strokeWidth: '2', 1971 | strokeLinecap: 'round', 1972 | }, 1973 | }, 1974 | ], 1975 | }, 1976 | ], 1977 | } 1978 | export const VolumeLow = { 1979 | width: 23, 1980 | height: 22, 1981 | children: [ 1982 | { 1983 | tag: 'g', 1984 | props: { id: 'Volume Low' }, 1985 | children: [ 1986 | { 1987 | tag: 'rect', 1988 | props: { 1989 | width: '21', 1990 | height: '22', 1991 | fill: 'black', 1992 | fillOpacity: '0', 1993 | transform: 'translate(0.98789 0.133209) scale(0.98789)', 1994 | }, 1995 | }, 1996 | { 1997 | tag: 'path', 1998 | props: { 1999 | id: 'Vector 10', 2000 | d: 2001 | 'M5.92734 6.06055V7.04844C6.12237 7.04844 6.31304 6.99071 6.47532 6.88252L5.92734 6.06055ZM5.92734 15.9394L6.47532 15.1175C6.31304 15.0093 6.12237 14.9516 5.92734 14.9516V15.9394ZM1.97578 13.9637V8.03633H0V13.9637H1.97578ZM2.96367 7.04844H5.92734V5.07266H2.96367V7.04844ZM6.47532 6.88252L13.8305 1.9791L12.7345 0.33515L5.37936 5.23857L6.47532 6.88252ZM13.8305 1.9791V20.0209H15.8062V1.9791H13.8305ZM13.8305 20.0209L6.47532 15.1175L5.37936 16.7614L12.7345 21.6648L13.8305 20.0209ZM5.92734 14.9516H2.96367V16.9273H5.92734V14.9516ZM0 13.9637C0 15.6005 1.32688 16.9273 2.96367 16.9273V14.9516C2.41807 14.9516 1.97578 14.5093 1.97578 13.9637H0ZM1.97578 8.03633C1.97578 7.49073 2.41807 7.04844 2.96367 7.04844V5.07266C1.32688 5.07266 0 6.39954 0 8.03633H1.97578ZM13.8305 1.9791H15.8062C15.8062 0.401052 14.0475 -0.540193 12.7345 0.33515L13.8305 1.9791ZM13.8305 20.0209L12.7345 21.6648C14.0475 22.5402 15.8062 21.5989 15.8062 20.0209H13.8305Z', 2002 | fill: 'black', 2003 | }, 2004 | }, 2005 | { 2006 | tag: 'line', 2007 | props: { 2008 | id: 'Line 13', 2009 | x1: '5.92734', 2010 | y1: '15.9394', 2011 | x2: '5.92734', 2012 | y2: '6.06055', 2013 | stroke: 'black', 2014 | strokeWidth: '2', 2015 | strokeLinecap: 'round', 2016 | }, 2017 | }, 2018 | { 2019 | tag: 'path', 2020 | props: { 2021 | id: 'Ellipse 15', 2022 | d: 2023 | 'M18.7699 13.9637C20.4067 13.9637 21.7336 12.6368 21.7336 11C21.7336 9.36321 20.4067 8.03633 18.7699 8.03633', 2024 | stroke: 'white', 2025 | strokeWidth: '2', 2026 | strokeLinecap: 'round', 2027 | }, 2028 | }, 2029 | ], 2030 | }, 2031 | ], 2032 | } 2033 | export const Friend = { 2034 | width: 30, 2035 | height: 26, 2036 | children: [ 2037 | { 2038 | tag: 'g', 2039 | props: { id: 'Friend' }, 2040 | children: [ 2041 | { 2042 | tag: 'rect', 2043 | props: { 2044 | width: '28.1683', 2045 | height: '24.9987', 2046 | fill: 'black', 2047 | fillOpacity: '0', 2048 | transform: 'translate(0.963004 0.963004) scale(0.963004)', 2049 | }, 2050 | }, 2051 | { 2052 | tag: 'path', 2053 | props: { 2054 | id: 'Ellipse 8', 2055 | d: 2056 | 'M5.77802 8.66704C5.77802 7.60333 6.64033 6.74103 7.70403 6.74103C8.76774 6.74103 9.63004 7.60333 9.63004 8.66704', 2057 | stroke: 'black', 2058 | strokeWidth: '2', 2059 | strokeLinecap: 'round', 2060 | }, 2061 | }, 2062 | { 2063 | tag: 'path', 2064 | props: { 2065 | id: 'Ellipse 8_2', 2066 | d: 2067 | 'M13.4821 8.66704C13.4821 7.60333 14.3444 6.74103 15.4081 6.74103C16.4718 6.74103 17.3341 7.60333 17.3341 8.66704', 2068 | stroke: 'black', 2069 | strokeWidth: '2', 2070 | strokeLinecap: 'round', 2071 | }, 2072 | }, 2073 | { 2074 | tag: 'path', 2075 | props: { 2076 | id: 'Subtract', 2077 | fillRule: 'evenodd', 2078 | clipRule: 'evenodd', 2079 | d: 2080 | 'M7.92341 17.0126C8.45236 15.5167 9.87905 14.4451 11.5561 14.4451C13.2331 14.4451 14.6598 15.5167 15.1887 17.0126C16.2618 16.144 17.0176 14.8988 17.2549 13.478C17.3425 12.9534 16.9029 12.5191 16.3711 12.5191H6.74105C6.2092 12.5191 5.76964 12.9534 5.85726 13.478C6.09457 14.8988 6.85031 16.144 7.92341 17.0126Z', 2081 | fill: 'black', 2082 | }, 2083 | }, 2084 | { 2085 | tag: 'path', 2086 | props: { 2087 | id: 'Ellipse 8_3', 2088 | d: 2089 | 'M11.556 18.2971C14.4205 18.2971 16.7981 16.2127 17.2549 13.478C17.3425 12.9534 16.9029 12.5191 16.3711 12.5191H6.74103C6.20918 12.5191 5.76961 12.9534 5.85724 13.478C6.31404 16.2127 8.69163 18.2971 11.556 18.2971Z', 2090 | stroke: 'black', 2091 | strokeWidth: '2', 2092 | }, 2093 | }, 2094 | { 2095 | tag: 'circle', 2096 | props: { 2097 | id: 'Ellipse 8_4', 2098 | cx: '11.556', 2099 | cy: '11.556', 2100 | r: '10.593', 2101 | stroke: 'black', 2102 | strokeWidth: '2', 2103 | }, 2104 | }, 2105 | { 2106 | tag: 'path', 2107 | props: { 2108 | id: 'Line 3', 2109 | d: 'M25.201 17.4496L28.0714 18.4669', 2110 | stroke: 'white', 2111 | strokeWidth: '2', 2112 | strokeLinecap: 'round', 2113 | }, 2114 | }, 2115 | { 2116 | tag: 'path', 2117 | props: { 2118 | id: 'Line 3_2', 2119 | d: 'M21.4418 22.4559L22.9476 25.0368', 2120 | stroke: 'white', 2121 | strokeWidth: '2', 2122 | strokeLinecap: 'round', 2123 | }, 2124 | }, 2125 | ], 2126 | }, 2127 | ], 2128 | } 2129 | export const FastForward = { 2130 | width: 21, 2131 | height: 16, 2132 | children: [ 2133 | { 2134 | tag: 'g', 2135 | props: { id: 'Fast-Forward' }, 2136 | children: [ 2137 | { 2138 | tag: 'rect', 2139 | props: { 2140 | width: '20.888', 2141 | height: '15', 2142 | fill: 'black', 2143 | fillOpacity: '0', 2144 | transform: 'translate(0 0.479729) scale(0.959429)', 2145 | }, 2146 | }, 2147 | { 2148 | tag: 'path', 2149 | props: { 2150 | id: 'Rectangle 25', 2151 | d: 'M6.716 0.959443L14.3914 7.67545L6.716 14.3914', 2152 | stroke: 'black', 2153 | strokeWidth: '2', 2154 | strokeLinecap: 'round', 2155 | strokeLinejoin: 'round', 2156 | }, 2157 | }, 2158 | { 2159 | tag: 'path', 2160 | props: { 2161 | id: 'Rectangle 25_2', 2162 | d: 'M12.3651 0.959443L20.0406 7.67545L12.3651 14.3914', 2163 | stroke: 'black', 2164 | strokeWidth: '2', 2165 | strokeLinecap: 'round', 2166 | strokeLinejoin: 'round', 2167 | }, 2168 | }, 2169 | { 2170 | tag: 'path', 2171 | props: { 2172 | id: 'Vector 11', 2173 | d: 'M5.75657 11.5132V3.83773L9.59429 7.67545L5.75657 11.5132Z', 2174 | fill: 'white', 2175 | }, 2176 | }, 2177 | ], 2178 | }, 2179 | ], 2180 | } 2181 | export const User = { 2182 | width: 30, 2183 | height: 23, 2184 | children: [ 2185 | { 2186 | tag: 'g', 2187 | props: { id: 'User' }, 2188 | children: [ 2189 | { 2190 | tag: 'rect', 2191 | props: { 2192 | width: '29.0483', 2193 | height: '22', 2194 | fill: 'black', 2195 | fillOpacity: '0', 2196 | transform: 'translate(0.922664) scale(0.969236)', 2197 | }, 2198 | }, 2199 | { 2200 | tag: 'path', 2201 | props: { 2202 | id: 'Vector 12', 2203 | d: 2204 | 'M6.76149 18.4155V21.3232H23.2385V18.4155C23.2385 16.2743 21.5027 14.5385 19.3616 14.5385H10.6384C8.49726 14.5385 6.76149 16.2743 6.76149 18.4155Z', 2205 | fill: 'white', 2206 | }, 2207 | }, 2208 | { 2209 | tag: 'path', 2210 | props: { 2211 | id: 'Line 3', 2212 | d: 'M4.84643 3.68369L1.93872 2.71445', 2213 | stroke: 'white', 2214 | strokeWidth: '2', 2215 | strokeLinecap: 'round', 2216 | }, 2217 | }, 2218 | { 2219 | tag: 'path', 2220 | props: { 2221 | id: 'Line 3_2', 2222 | d: 'M3.7621 9.98372L0.969487 11.1', 2223 | stroke: 'white', 2224 | strokeWidth: '2', 2225 | strokeLinecap: 'round', 2226 | }, 2227 | }, 2228 | { 2229 | tag: 'path', 2230 | props: { 2231 | id: 'Line 3_3', 2232 | d: 'M25.1536 3.68369L28.0613 2.71445', 2233 | stroke: 'white', 2234 | strokeWidth: '2', 2235 | strokeLinecap: 'round', 2236 | }, 2237 | }, 2238 | { 2239 | tag: 'path', 2240 | props: { 2241 | id: 'Line 3_4', 2242 | d: 'M26.2379 9.98372L29.0305 11.1', 2243 | stroke: 'white', 2244 | strokeWidth: '2', 2245 | strokeLinecap: 'round', 2246 | }, 2247 | }, 2248 | { 2249 | tag: 'path', 2250 | props: { 2251 | id: 'Vector 4', 2252 | d: 2253 | 'M5.79226 21.3232C5.79226 21.8585 6.2262 22.2924 6.76149 22.2924C7.29679 22.2924 7.73073 21.8585 7.73073 21.3232H5.79226ZM22.2693 21.3232C22.2693 21.8585 22.7032 22.2924 23.2385 22.2924C23.7738 22.2924 24.2077 21.8585 24.2077 21.3232H22.2693ZM7.73073 21.3232V20.354H5.79226V21.3232H7.73073ZM12.5769 15.5078H17.4231V13.5693H12.5769V15.5078ZM22.2693 20.354V21.3232H24.2077V20.354H22.2693ZM7.73073 20.354C7.73073 17.6775 9.90044 15.5078 12.5769 15.5078V13.5693C8.82985 13.5693 5.79226 16.6069 5.79226 20.354H7.73073ZM17.4231 15.5078C20.0996 15.5078 22.2693 17.6775 22.2693 20.354H24.2077C24.2077 16.6069 21.1701 13.5693 17.4231 13.5693V15.5078Z', 2254 | fill: 'black', 2255 | }, 2256 | }, 2257 | { 2258 | tag: 'circle', 2259 | props: { 2260 | id: 'Ellipse 10', 2261 | cx: '15', 2262 | cy: '6.30003', 2263 | r: '5.30003', 2264 | stroke: 'black', 2265 | strokeWidth: '2', 2266 | }, 2267 | }, 2268 | { 2269 | tag: 'rect', 2270 | props: { 2271 | id: 'Rectangle 17', 2272 | x: '12.6077', 2273 | y: '11.6616', 2274 | width: '4.78465', 2275 | height: '2.84618', 2276 | stroke: 'black', 2277 | strokeWidth: '2', 2278 | }, 2279 | }, 2280 | { 2281 | tag: 'path', 2282 | props: { 2283 | id: 'Vector 2', 2284 | d: 2285 | 'M21.9138 2.68862C22.3281 2.34965 22.3891 1.73901 22.0502 1.32472C21.7112 0.91042 21.1006 0.849356 20.6863 1.18832L21.9138 2.68862ZM10.9223 2.62383C11.776 3.47754 13.3168 4.46183 15.257 4.7508C17.2394 5.04604 19.5729 4.60386 21.9138 2.68862L20.6863 1.18832C18.7625 2.76233 16.9768 3.04708 15.5426 2.83347C14.0662 2.61359 12.8932 1.85326 12.293 1.25312L10.9223 2.62383Z', 2286 | fill: 'black', 2287 | }, 2288 | }, 2289 | ], 2290 | }, 2291 | ], 2292 | } 2293 | export const Menu = { 2294 | width: 18, 2295 | height: 21, 2296 | children: [ 2297 | { 2298 | tag: 'g', 2299 | props: { id: 'Menu' }, 2300 | children: [ 2301 | { 2302 | tag: 'rect', 2303 | props: { 2304 | width: '18', 2305 | height: '19', 2306 | fill: 'black', 2307 | fillOpacity: '0', 2308 | transform: 'translate(0 2)', 2309 | }, 2310 | }, 2311 | { 2312 | tag: 'path', 2313 | props: { id: 'Vector 13', d: 'M13 16H5L9 21L13 16Z', fill: 'white' }, 2314 | }, 2315 | { 2316 | tag: 'line', 2317 | props: { 2318 | id: 'Line 12', 2319 | x1: '1', 2320 | y1: '1', 2321 | x2: '17', 2322 | y2: '1', 2323 | stroke: 'black', 2324 | strokeWidth: '2', 2325 | strokeLinecap: 'round', 2326 | }, 2327 | }, 2328 | { 2329 | tag: 'line', 2330 | props: { 2331 | id: 'Line 12_2', 2332 | x1: '1', 2333 | y1: '7', 2334 | x2: '17', 2335 | y2: '7', 2336 | stroke: 'black', 2337 | strokeWidth: '2', 2338 | strokeLinecap: 'round', 2339 | }, 2340 | }, 2341 | { 2342 | tag: 'line', 2343 | props: { 2344 | id: 'Line 12_3', 2345 | x1: '1', 2346 | y1: '13', 2347 | x2: '17', 2348 | y2: '13', 2349 | stroke: 'black', 2350 | strokeWidth: '2', 2351 | strokeLinecap: 'round', 2352 | }, 2353 | }, 2354 | ], 2355 | }, 2356 | ], 2357 | } 2358 | -------------------------------------------------------------------------------- /examples/react-native-example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-example", 3 | "version": "0.1.0", 4 | "private": true, 5 | "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js", 6 | "scripts": { 7 | "icons": "unicon figma 5XaqhenkjvPmJprGZMPr4j --name icons --transformer json", 8 | "start": "react-native-scripts start", 9 | "eject": "react-native-scripts eject", 10 | "android": "react-native-scripts android", 11 | "ios": "react-native-scripts ios", 12 | "test": "jest" 13 | }, 14 | "jest": { 15 | "preset": "jest-expo" 16 | }, 17 | "devDependencies": { 18 | "jest-expo": "~38.0.2", 19 | "react-native-scripts": "2.0.1", 20 | "react-test-renderer": "16.13.1", 21 | "unicon-cli": "*", 22 | "unicon-transformer-json": "*" 23 | }, 24 | "dependencies": { 25 | "expo": "^38.0.10", 26 | "react": "16.13.1", 27 | "react-native": "~0.63.2", 28 | "react-native-svg": "^12.1.0", 29 | "unicon-react": "*" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /examples/react-web-example/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /examples/react-web-example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-web", 3 | "version": "0.1.0", 4 | "private": true, 5 | "devDependencies": { 6 | "pascalcase": "^1.0.0", 7 | "react-scripts": "3.4.3", 8 | "svgo": "^1.3.2", 9 | "svgson": "^4.1.0", 10 | "unicon": "*", 11 | "unicon-cli": "*", 12 | "unicon-transformer-json": "^0.0.1", 13 | "util": "^0.12.3" 14 | }, 15 | "dependencies": { 16 | "react": "^16.13.1", 17 | "react-dom": "^16.13.1", 18 | "unicon-react": "*" 19 | }, 20 | "scripts": { 21 | "icons": "node ./unicon.config.js", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/react-web-example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/souporserious/unicon/880d1450af573c4045f4b3ac058b615eb52eed7a/examples/react-web-example/public/favicon.ico -------------------------------------------------------------------------------- /examples/react-web-example/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /examples/react-web-example/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/react-web-example/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-title { 18 | font-size: 1.5em; 19 | } 20 | 21 | .App-intro { 22 | font-size: large; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { 27 | transform: rotate(0deg); 28 | } 29 | to { 30 | transform: rotate(360deg); 31 | } 32 | } 33 | 34 | #check-ins { 35 | transform-origin: center center; 36 | transform: scale(1); 37 | transition: 300ms ease-out; 38 | } 39 | #check-ins:hover { 40 | transform: scale(1.1); 41 | } 42 | -------------------------------------------------------------------------------- /examples/react-web-example/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import Graphic from 'unicon-react' 3 | import * as Icons from './icons' 4 | import Controls from './Controls' 5 | 6 | import './App.css' 7 | 8 | class App extends Component { 9 | state = { 10 | scaleAuto: false, 11 | scaleAmount: 4, 12 | } 13 | render() { 14 | const { scaleAuto, scaleAmount } = this.state 15 | return ( 16 |
17 | 20 | this.setState((state) => ({ scaleAuto: !state.scaleAuto })) 21 | } 22 | scaleAmount={scaleAmount} 23 | onScaleAmountChange={(e) => 24 | this.setState({ scaleAmount: +e.target.value }) 25 | } 26 | /> 27 |
36 | {Object.keys(Icons).map((key) => ( 37 |
47 | 52 | {key} 53 |
54 | ))} 55 |
56 |
57 | ) 58 | } 59 | } 60 | 61 | export default App 62 | -------------------------------------------------------------------------------- /examples/react-web-example/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import App from './App' 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div') 7 | ReactDOM.render(, div) 8 | ReactDOM.unmountComponentAtNode(div) 9 | }) 10 | -------------------------------------------------------------------------------- /examples/react-web-example/src/Controls.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | function Controls({ 4 | scaleAuto, 5 | scaleAmount, 6 | onScaleAutoChange, 7 | onScaleAmountChange, 8 | }) { 9 | return ( 10 |
11 |

Scale:

12 | 21 | 32 |
33 | ) 34 | } 35 | 36 | export default Controls 37 | -------------------------------------------------------------------------------- /examples/react-web-example/src/icons.js: -------------------------------------------------------------------------------- 1 | export const Comment = { 2 | width: 27, 3 | height: 23, 4 | children: [ 5 | { 6 | tag: 'g', 7 | props: { id: 'Comment' }, 8 | children: [ 9 | { 10 | tag: 'rect', 11 | props: { 12 | width: '25', 13 | height: '21', 14 | fill: 'black', 15 | fillOpacity: '0', 16 | transform: 'translate(1 1)', 17 | }, 18 | }, 19 | { 20 | tag: 'path', 21 | props: { 22 | id: 'Union', 23 | fillRule: 'evenodd', 24 | clipRule: 'evenodd', 25 | d: 26 | 'M6 1C3.23857 1 1 3.23858 1 6V13C1 15.7614 3.23857 18 6 18H7V22L12.7143 18H21C23.7614 18 26 15.7614 26 13V6C26 3.23858 23.7614 1 21 1H6Z', 27 | fill: 'white', 28 | }, 29 | }, 30 | { 31 | tag: 'circle', 32 | props: { 33 | id: 'Ellipse 4', 34 | cx: '19.5', 35 | cy: '9.5', 36 | r: '1.5', 37 | fill: 'black', 38 | }, 39 | }, 40 | { 41 | tag: 'circle', 42 | props: { 43 | id: 'Ellipse 4_2', 44 | cx: '13.5', 45 | cy: '9.5', 46 | r: '1.5', 47 | fill: 'black', 48 | }, 49 | }, 50 | { 51 | tag: 'circle', 52 | props: { 53 | id: 'Ellipse 4_3', 54 | cx: '7.5', 55 | cy: '9.5', 56 | r: '1.5', 57 | fill: 'black', 58 | }, 59 | }, 60 | { 61 | tag: 'path', 62 | props: { 63 | id: 'Union_2', 64 | d: 65 | 'M7 18H8C8 17.4477 7.55228 17 7 17V18ZM7 22H6C6 22.3729 6.20746 22.7148 6.53819 22.887C6.86892 23.0592 7.26799 23.0331 7.57346 22.8192L7 22ZM12.7143 18V17C12.5091 17 12.3089 17.0631 12.1408 17.1808L12.7143 18ZM2 6C2 3.79086 3.79086 2 6 2V0C2.68629 0 0 2.68629 0 6H2ZM2 13V6H0V13H2ZM6 17C3.79086 17 2 15.2091 2 13H0C0 16.3137 2.68628 19 6 19V17ZM7 17H6V19H7V17ZM8 22V18H6V22H8ZM12.1408 17.1808L6.42654 21.1808L7.57346 22.8192L13.2877 18.8192L12.1408 17.1808ZM21 17H12.7143V19H21V17ZM25 13C25 15.2091 23.2091 17 21 17V19C24.3137 19 27 16.3137 27 13H25ZM25 6V13H27V6H25ZM21 2C23.2091 2 25 3.79086 25 6H27C27 2.68629 24.3137 0 21 0V2ZM6 2H21V0H6V2Z', 66 | fill: 'black', 67 | }, 68 | }, 69 | ], 70 | }, 71 | ], 72 | } 73 | export const Settings = { 74 | width: 26, 75 | height: 26, 76 | children: [ 77 | { 78 | tag: 'g', 79 | props: { id: 'Settings' }, 80 | children: [ 81 | { 82 | tag: 'rect', 83 | props: { 84 | width: '26', 85 | height: '24', 86 | fill: 'black', 87 | fillOpacity: '0', 88 | transform: 'translate(0 1)', 89 | }, 90 | }, 91 | { 92 | tag: 'circle', 93 | props: { id: 'Ellipse 3', cx: '4', cy: '4', r: '2', fill: 'white' }, 94 | }, 95 | { 96 | tag: 'circle', 97 | props: { 98 | id: 'Ellipse 3_2', 99 | cx: '18', 100 | cy: '13', 101 | r: '2', 102 | fill: 'white', 103 | }, 104 | }, 105 | { 106 | tag: 'circle', 107 | props: { 108 | id: 'Ellipse 3_3', 109 | cx: '9', 110 | cy: '22', 111 | r: '2', 112 | fill: 'white', 113 | }, 114 | }, 115 | { 116 | tag: 'circle', 117 | props: { 118 | id: 'Ellipse', 119 | cx: '4', 120 | cy: '4', 121 | r: '3', 122 | stroke: 'black', 123 | strokeWidth: '2', 124 | }, 125 | }, 126 | { 127 | tag: 'line', 128 | props: { 129 | id: 'Line', 130 | x1: '8', 131 | y1: '4', 132 | x2: '24', 133 | y2: '4', 134 | stroke: 'black', 135 | strokeWidth: '2', 136 | strokeLinecap: 'round', 137 | }, 138 | }, 139 | { 140 | tag: 'circle', 141 | props: { 142 | id: 'Ellipse_2', 143 | cx: '9', 144 | cy: '22', 145 | r: '3', 146 | stroke: 'black', 147 | strokeWidth: '2', 148 | }, 149 | }, 150 | { 151 | tag: 'line', 152 | props: { 153 | id: 'Line_2', 154 | x1: '13', 155 | y1: '22', 156 | x2: '24', 157 | y2: '22', 158 | stroke: 'black', 159 | strokeWidth: '2', 160 | strokeLinecap: 'round', 161 | }, 162 | }, 163 | { 164 | tag: 'line', 165 | props: { 166 | id: 'Line_3', 167 | x1: '1', 168 | y1: '22', 169 | x2: '6', 170 | y2: '22', 171 | stroke: 'black', 172 | strokeWidth: '2', 173 | strokeLinecap: 'round', 174 | }, 175 | }, 176 | { 177 | tag: 'circle', 178 | props: { 179 | id: 'Ellipse_3', 180 | cx: '18', 181 | cy: '13', 182 | r: '3', 183 | stroke: 'black', 184 | strokeWidth: '2', 185 | }, 186 | }, 187 | { 188 | tag: 'line', 189 | props: { 190 | id: 'Line_4', 191 | x1: '1', 192 | y1: '13', 193 | x2: '15', 194 | y2: '13', 195 | stroke: 'black', 196 | strokeWidth: '2', 197 | strokeLinecap: 'round', 198 | }, 199 | }, 200 | { 201 | tag: 'line', 202 | props: { 203 | id: 'Line_5', 204 | x1: '22', 205 | y1: '13', 206 | x2: '25', 207 | y2: '13', 208 | stroke: 'black', 209 | strokeWidth: '2', 210 | strokeLinecap: 'round', 211 | }, 212 | }, 213 | ], 214 | }, 215 | ], 216 | } 217 | export const Camera = { 218 | width: 34, 219 | height: 27, 220 | children: [ 221 | { 222 | tag: 'g', 223 | props: { id: 'Camera' }, 224 | children: [ 225 | { 226 | tag: 'rect', 227 | props: { 228 | width: '34.6214', 229 | height: '26.848', 230 | fill: 'black', 231 | fillOpacity: '0', 232 | transform: 'translate(0 0.549654) scale(0.982052)', 233 | }, 234 | }, 235 | { 236 | tag: 'rect', 237 | props: { 238 | id: 'Rectangle 4', 239 | x: '1.9641', 240 | y: '14.1491', 241 | width: '8.83847', 242 | height: '5.89231', 243 | fill: 'white', 244 | }, 245 | }, 246 | { 247 | tag: 'rect', 248 | props: { 249 | id: 'Rectangle 4_2', 250 | x: '21.6051', 251 | y: '14.1491', 252 | width: '2.94616', 253 | height: '5.89231', 254 | fill: 'white', 255 | }, 256 | }, 257 | { 258 | tag: 'rect', 259 | props: { 260 | id: 'Rectangle 5', 261 | x: '15.7128', 262 | y: '6.29266', 263 | width: '5.89231', 264 | height: '0.982052', 265 | fill: 'white', 266 | }, 267 | }, 268 | { 269 | tag: 'line', 270 | props: { 271 | id: 'Line 3', 272 | x1: '27.0648', 273 | y1: '4.1863', 274 | x2: '28.6869', 275 | y2: '0.982266', 276 | stroke: 'white', 277 | strokeWidth: '2', 278 | strokeLinecap: 'round', 279 | }, 280 | }, 281 | { 282 | tag: 'line', 283 | props: { 284 | id: 'Line 3_2', 285 | x1: '29.3484', 286 | y1: '7.99972', 287 | x2: '32.7609', 288 | y2: '6.88107', 289 | stroke: 'white', 290 | strokeWidth: '2', 291 | strokeLinecap: 'round', 292 | }, 293 | }, 294 | { 295 | tag: 'rect', 296 | props: { 297 | id: 'Rectangle 3', 298 | x: '14.7487', 299 | y: '5.32855', 300 | width: '7.82052', 301 | height: '2.91026', 302 | rx: '1', 303 | stroke: 'black', 304 | strokeWidth: '2', 305 | }, 306 | }, 307 | { 308 | tag: 'rect', 309 | props: { 310 | id: 'Rectangle 2', 311 | x: '1', 312 | y: '8.27471', 313 | width: '24.5154', 314 | height: '17.641', 315 | rx: '1', 316 | stroke: 'black', 317 | strokeWidth: '2', 318 | strokeLinejoin: 'round', 319 | }, 320 | }, 321 | { 322 | tag: 'circle', 323 | props: { 324 | id: 'Ellipse 2', 325 | cx: '15.7128', 326 | cy: '17.0952', 327 | r: '5.87436', 328 | stroke: 'black', 329 | strokeWidth: '2', 330 | }, 331 | }, 332 | { 333 | tag: 'circle', 334 | props: { 335 | id: 'Ellipse 2_2', 336 | cx: '15.7128', 337 | cy: '17.0952', 338 | r: '2.92821', 339 | stroke: 'black', 340 | strokeWidth: '2', 341 | }, 342 | }, 343 | { 344 | tag: 'line', 345 | props: { 346 | id: 'Line 2', 347 | x1: '1.9641', 348 | y1: '13.167', 349 | x2: '11.7846', 350 | y2: '13.167', 351 | stroke: 'black', 352 | strokeWidth: '2', 353 | }, 354 | }, 355 | { 356 | tag: 'line', 357 | props: { 358 | id: 'Line 2_2', 359 | x1: '19.641', 360 | y1: '13.167', 361 | x2: '25.5333', 362 | y2: '13.167', 363 | stroke: 'black', 364 | strokeWidth: '2', 365 | }, 366 | }, 367 | { 368 | tag: 'line', 369 | props: { 370 | id: 'Line 2_3', 371 | x1: '1.9641', 372 | y1: '21.0234', 373 | x2: '11.7846', 374 | y2: '21.0234', 375 | stroke: 'black', 376 | strokeWidth: '2', 377 | }, 378 | }, 379 | { 380 | tag: 'line', 381 | props: { 382 | id: 'Line 2_4', 383 | x1: '19.641', 384 | y1: '21.0234', 385 | x2: '25.5333', 386 | y2: '21.0234', 387 | stroke: 'black', 388 | strokeWidth: '2', 389 | }, 390 | }, 391 | ], 392 | }, 393 | ], 394 | } 395 | export const Play = { 396 | width: 28, 397 | height: 21, 398 | children: [ 399 | { 400 | tag: 'g', 401 | props: { id: 'Play' }, 402 | children: [ 403 | { 404 | tag: 'rect', 405 | props: { width: '28', height: '21', fill: 'black', fillOpacity: '0' }, 406 | }, 407 | { 408 | tag: 'rect', 409 | props: { 410 | id: 'Rectangle 9', 411 | x: '2', 412 | y: '2', 413 | width: '24', 414 | height: '3', 415 | fill: 'white', 416 | }, 417 | }, 418 | { 419 | tag: 'rect', 420 | props: { 421 | id: 'Rectangle 9_2', 422 | x: '2', 423 | y: '12', 424 | width: '24', 425 | height: '3', 426 | fill: 'white', 427 | }, 428 | }, 429 | { 430 | tag: 'circle', 431 | props: { id: 'Ellipse 6', cx: '8', cy: '9', r: '2', fill: 'white' }, 432 | }, 433 | { 434 | tag: 'circle', 435 | props: { 436 | id: 'Ellipse 6_2', 437 | cx: '20', 438 | cy: '9', 439 | r: '2', 440 | fill: 'white', 441 | }, 442 | }, 443 | { 444 | tag: 'rect', 445 | props: { 446 | id: 'Rectangle 7', 447 | x: '1', 448 | y: '1', 449 | width: '26', 450 | height: '19', 451 | rx: '1', 452 | stroke: 'black', 453 | strokeWidth: '2', 454 | }, 455 | }, 456 | { 457 | tag: 'path', 458 | props: { 459 | id: 'Rectangle 7_2', 460 | d: 'M6.84713 16L21.1529 16L21.8195 20L6.18046 20L6.84713 16Z', 461 | stroke: 'black', 462 | strokeWidth: '2', 463 | }, 464 | }, 465 | { 466 | tag: 'circle', 467 | props: { 468 | id: 'Ellipse 5', 469 | cx: '8', 470 | cy: '9', 471 | r: '3', 472 | stroke: 'black', 473 | strokeWidth: '2', 474 | }, 475 | }, 476 | { 477 | tag: 'circle', 478 | props: { 479 | id: 'Ellipse 5_2', 480 | cx: '20', 481 | cy: '9', 482 | r: '3', 483 | stroke: 'black', 484 | strokeWidth: '2', 485 | }, 486 | }, 487 | { 488 | tag: 'rect', 489 | props: { 490 | id: 'Rectangle 8', 491 | x: '5', 492 | y: '6', 493 | width: '18', 494 | height: '6', 495 | rx: '3', 496 | stroke: 'black', 497 | strokeWidth: '2', 498 | }, 499 | }, 500 | ], 501 | }, 502 | ], 503 | } 504 | export const NewDoc = { 505 | width: 18, 506 | height: 22, 507 | children: [ 508 | { 509 | tag: 'g', 510 | props: { id: 'New Doc' }, 511 | children: [ 512 | { 513 | tag: 'rect', 514 | props: { width: '18', height: '22', fill: 'black', fillOpacity: '0' }, 515 | }, 516 | { 517 | tag: 'path', 518 | props: { 519 | id: 'Vector 10', 520 | d: 'M1 21V1.5H10.5L17 8V21H1Z', 521 | fill: 'white', 522 | }, 523 | }, 524 | { 525 | tag: 'path', 526 | props: { 527 | id: 'Vector 10_2', 528 | d: 529 | 'M17 8V19C17 20.1046 16.1046 21 15 21H3C1.89543 21 1 20.1046 1 19V3.5C1 2.39543 1.89543 1.5 3 1.5H10.5M17 8L10.5 1.5M17 8H12.5C11.3954 8 10.5 7.10457 10.5 6V1.5', 530 | stroke: 'black', 531 | strokeWidth: '2', 532 | }, 533 | }, 534 | { 535 | tag: 'line', 536 | props: { 537 | id: 'Line 4.1', 538 | x1: '5', 539 | y1: '8', 540 | x2: '7', 541 | y2: '8', 542 | stroke: 'black', 543 | strokeWidth: '2', 544 | strokeLinecap: 'round', 545 | }, 546 | }, 547 | { 548 | tag: 'line', 549 | props: { 550 | id: 'Line 4.2', 551 | x1: '5', 552 | y1: '12', 553 | x2: '13', 554 | y2: '12', 555 | stroke: 'black', 556 | strokeWidth: '2', 557 | strokeLinecap: 'round', 558 | }, 559 | }, 560 | { 561 | tag: 'line', 562 | props: { 563 | id: 'Line 4.3', 564 | x1: '5', 565 | y1: '16', 566 | x2: '13', 567 | y2: '16', 568 | stroke: 'black', 569 | strokeWidth: '2', 570 | strokeLinecap: 'round', 571 | }, 572 | }, 573 | ], 574 | }, 575 | ], 576 | } 577 | export const Save = { 578 | width: 26, 579 | height: 25, 580 | children: [ 581 | { 582 | tag: 'g', 583 | props: { id: 'Save' }, 584 | children: [ 585 | { 586 | tag: 'rect', 587 | props: { width: '26', height: '25', fill: 'black', fillOpacity: '0' }, 588 | }, 589 | { 590 | tag: 'rect', 591 | props: { 592 | id: 'Rectangle 14', 593 | x: '6', 594 | y: '15', 595 | width: '14', 596 | height: '8', 597 | fill: 'white', 598 | }, 599 | }, 600 | { 601 | tag: 'path', 602 | props: { 603 | id: 'Rectangle 11', 604 | d: 605 | 'M24 24H2C1.44771 24 1 23.5523 1 23V2C1 1.44772 1.44772 1 2 1H21.1716C21.4368 1 21.6911 1.10536 21.8787 1.29289L24.7071 4.12132C24.8946 4.30886 25 4.56321 25 4.82843V23C25 23.5523 24.5523 24 24 24Z', 606 | stroke: 'black', 607 | strokeWidth: '2', 608 | }, 609 | }, 610 | { 611 | tag: 'rect', 612 | props: { 613 | id: 'Rectangle 14_2', 614 | x: '5', 615 | y: '14', 616 | width: '16', 617 | height: '10', 618 | stroke: 'black', 619 | strokeWidth: '2', 620 | }, 621 | }, 622 | { 623 | tag: 'path', 624 | props: { 625 | id: 'Subtract', 626 | fillRule: 'evenodd', 627 | clipRule: 'evenodd', 628 | d: 'M20 0H4V11H20V0ZM17 2H13V9H17V2Z', 629 | fill: 'black', 630 | }, 631 | }, 632 | ], 633 | }, 634 | ], 635 | } 636 | export const Profile = { 637 | width: 30, 638 | height: 23, 639 | children: [ 640 | { 641 | tag: 'g', 642 | props: { id: 'Profile' }, 643 | children: [ 644 | { 645 | tag: 'rect', 646 | props: { 647 | width: '29.0483', 648 | height: '22', 649 | fill: 'black', 650 | fillOpacity: '0', 651 | transform: 'translate(0.922664 0.193519) scale(0.969236)', 652 | }, 653 | }, 654 | { 655 | tag: 'path', 656 | props: { 657 | id: 'Subtract', 658 | fillRule: 'evenodd', 659 | clipRule: 'evenodd', 660 | d: 661 | 'M10.6885 15.7013C10.9295 17.882 12.7784 19.5782 15.0234 19.5782C17.2684 19.5782 19.1173 17.882 19.3583 15.7013H10.6885Z', 662 | fill: 'white', 663 | }, 664 | }, 665 | { 666 | tag: 'path', 667 | props: { 668 | id: 'Line 3', 669 | d: 'M4.84643 1.93874L1.93872 0.969502', 670 | stroke: 'white', 671 | strokeWidth: '2', 672 | strokeLinecap: 'round', 673 | }, 674 | }, 675 | { 676 | tag: 'path', 677 | props: { 678 | id: 'Line 3_2', 679 | d: 'M3.7621 8.23877L0.969487 9.35505', 680 | stroke: 'white', 681 | strokeWidth: '2', 682 | strokeLinecap: 'round', 683 | }, 684 | }, 685 | { 686 | tag: 'path', 687 | props: { 688 | id: 'Line 3_3', 689 | d: 'M25.1536 1.93874L28.0613 0.969502', 690 | stroke: 'white', 691 | strokeWidth: '2', 692 | strokeLinecap: 'round', 693 | }, 694 | }, 695 | { 696 | tag: 'path', 697 | props: { 698 | id: 'Line 3_4', 699 | d: 'M26.2379 8.23877L29.0305 9.35505', 700 | stroke: 'white', 701 | strokeWidth: '2', 702 | strokeLinecap: 'round', 703 | }, 704 | }, 705 | { 706 | tag: 'path', 707 | props: { 708 | id: 'Vector 4', 709 | d: 710 | 'M5.81565 21.5167C5.81565 22.052 6.24959 22.4859 6.78489 22.4859C7.32018 22.4859 7.75412 22.052 7.75412 21.5167H5.81565ZM22.2927 21.5167C22.2927 22.052 22.7266 22.4859 23.2619 22.4859C23.7972 22.4859 24.2311 22.052 24.2311 21.5167H22.2927ZM7.75412 21.5167V20.5475H5.81565V21.5167H7.75412ZM12.6003 15.7013H17.4465V13.7628H12.6003V15.7013ZM22.2927 20.5475V21.5167H24.2311V20.5475H22.2927ZM7.75412 20.5475C7.75412 17.871 9.92383 15.7013 12.6003 15.7013V13.7628C8.85324 13.7628 5.81565 16.8004 5.81565 20.5475H7.75412ZM17.4465 15.7013C20.123 15.7013 22.2927 17.871 22.2927 20.5475H24.2311C24.2311 16.8004 21.1935 13.7628 17.4465 13.7628V15.7013Z', 711 | fill: 'black', 712 | }, 713 | }, 714 | { 715 | tag: 'circle', 716 | props: { 717 | id: 'Ellipse 10', 718 | cx: '15.0234', 719 | cy: '6.49355', 720 | r: '5.30003', 721 | stroke: 'black', 722 | strokeWidth: '2', 723 | }, 724 | }, 725 | { 726 | tag: 'rect', 727 | props: { 728 | id: 'Rectangle 17', 729 | x: '12.6311', 730 | y: '11.8551', 731 | width: '4.78465', 732 | height: '2.84618', 733 | stroke: 'black', 734 | strokeWidth: '2', 735 | }, 736 | }, 737 | { 738 | tag: 'path', 739 | props: { 740 | id: 'Vector 3', 741 | d: 742 | 'M9.6926 6.00893L6.42138 13.3692C6.13651 14.0101 6.60568 14.7321 7.30708 14.7321H13.5695', 743 | stroke: 'black', 744 | strokeWidth: '2', 745 | }, 746 | }, 747 | { 748 | tag: 'path', 749 | props: { 750 | id: 'Vector 3_2', 751 | d: 752 | 'M20.3542 6.00893L23.6254 13.3692C23.9103 14.0101 23.4411 14.7321 22.7397 14.7321H16.4772', 753 | stroke: 'black', 754 | strokeWidth: '2', 755 | }, 756 | }, 757 | { 758 | tag: 'path', 759 | props: { 760 | id: 'Vector 2', 761 | d: 762 | 'M21.9372 2.88214C22.3515 2.54317 22.4125 1.93253 22.0736 1.51823C21.7346 1.10394 21.124 1.04287 20.7097 1.38184L21.9372 2.88214ZM10.9457 2.81734C11.7994 3.67106 13.3402 4.65535 15.2804 4.94432C17.2628 5.23956 19.5963 4.79738 21.9372 2.88214L20.7097 1.38184C18.7859 2.95585 17.0002 3.2406 15.566 3.02699C14.0896 2.80711 12.9166 2.04678 12.3164 1.44664L10.9457 2.81734Z', 763 | fill: 'black', 764 | }, 765 | }, 766 | ], 767 | }, 768 | ], 769 | } 770 | export const Send = { 771 | width: 26, 772 | height: 18, 773 | children: [ 774 | { 775 | tag: 'g', 776 | props: { id: 'Send' }, 777 | children: [ 778 | { 779 | tag: 'rect', 780 | props: { width: '26', height: '18', fill: 'black', fillOpacity: '0' }, 781 | }, 782 | { 783 | tag: 'rect', 784 | props: { 785 | id: 'Rectangle 13', 786 | width: '26', 787 | height: '18', 788 | rx: '2', 789 | fill: 'white', 790 | }, 791 | }, 792 | { 793 | tag: 'rect', 794 | props: { 795 | id: 'Rectangle 13_2', 796 | x: '1', 797 | y: '1', 798 | width: '24', 799 | height: '16', 800 | rx: '1', 801 | stroke: 'black', 802 | strokeWidth: '2', 803 | }, 804 | }, 805 | { 806 | tag: 'path', 807 | props: { 808 | id: 'Vector 5', 809 | d: 'M2 2L13 10L24 2', 810 | stroke: 'black', 811 | strokeWidth: '2', 812 | strokeLinejoin: 'round', 813 | }, 814 | }, 815 | { 816 | tag: 'path', 817 | props: { 818 | id: 'Vector 6', 819 | d: 'M15 8L24 16', 820 | stroke: 'black', 821 | strokeWidth: '2', 822 | }, 823 | }, 824 | { 825 | tag: 'path', 826 | props: { 827 | id: 'Vector 6_2', 828 | d: 'M11 8L2 16', 829 | stroke: 'black', 830 | strokeWidth: '2', 831 | }, 832 | }, 833 | ], 834 | }, 835 | ], 836 | } 837 | export const Location = { 838 | width: 32, 839 | height: 21, 840 | children: [ 841 | { 842 | tag: 'g', 843 | props: { id: 'Location' }, 844 | children: [ 845 | { 846 | tag: 'rect', 847 | props: { width: '32', height: '21', fill: 'black', fillOpacity: '0' }, 848 | }, 849 | { 850 | tag: 'rect', 851 | props: { 852 | id: 'Rectangle 19', 853 | x: '15', 854 | y: '17', 855 | width: '3', 856 | height: '2', 857 | fill: 'white', 858 | }, 859 | }, 860 | { 861 | tag: 'rect', 862 | props: { 863 | id: 'Rectangle 20', 864 | x: '12', 865 | y: '2', 866 | width: '9', 867 | height: '1', 868 | fill: 'white', 869 | }, 870 | }, 871 | { 872 | tag: 'path', 873 | props: { 874 | id: 'Rectangle 16', 875 | d: 876 | 'M11 2C11 1.44772 11.4477 1 12 1H21C21.5523 1 22 1.44772 22 2V20H11V2Z', 877 | stroke: 'black', 878 | strokeWidth: '2', 879 | }, 880 | }, 881 | { 882 | tag: 'path', 883 | props: { 884 | id: 'Rectangle 16_2', 885 | d: 886 | 'M1 8C1 7.44772 1.44772 7 2 7H11V20H2C1.44772 20 1 19.5523 1 19V8Z', 887 | stroke: 'black', 888 | strokeWidth: '2', 889 | }, 890 | }, 891 | { 892 | tag: 'path', 893 | props: { 894 | id: 'Rectangle 16_3', 895 | d: 896 | 'M22 11H30C30.5523 11 31 11.4477 31 12V19C31 19.5523 30.5523 20 30 20H22V11Z', 897 | stroke: 'black', 898 | strokeWidth: '2', 899 | }, 900 | }, 901 | { 902 | tag: 'line', 903 | props: { 904 | id: 'Line 5', 905 | x1: '12', 906 | y1: '4', 907 | x2: '21', 908 | y2: '4', 909 | stroke: 'black', 910 | strokeWidth: '2', 911 | }, 912 | }, 913 | { 914 | tag: 'line', 915 | props: { 916 | id: 'Line 6', 917 | x1: '15', 918 | y1: '7', 919 | x2: '15', 920 | y2: '9', 921 | stroke: 'black', 922 | strokeWidth: '2', 923 | }, 924 | }, 925 | { 926 | tag: 'line', 927 | props: { 928 | id: 'Line 6_2', 929 | x1: '4', 930 | y1: '10', 931 | x2: '4', 932 | y2: '12', 933 | stroke: 'black', 934 | strokeWidth: '2', 935 | }, 936 | }, 937 | { 938 | tag: 'line', 939 | props: { 940 | id: 'Line 6_3', 941 | x1: '8', 942 | y1: '10', 943 | x2: '8', 944 | y2: '12', 945 | stroke: 'black', 946 | strokeWidth: '2', 947 | }, 948 | }, 949 | { 950 | tag: 'line', 951 | props: { 952 | id: 'Line 6_4', 953 | x1: '4', 954 | y1: '14', 955 | x2: '4', 956 | y2: '16', 957 | stroke: 'black', 958 | strokeWidth: '2', 959 | }, 960 | }, 961 | { 962 | tag: 'line', 963 | props: { 964 | id: 'Line 6_5', 965 | x1: '8', 966 | y1: '14', 967 | x2: '8', 968 | y2: '16', 969 | stroke: 'black', 970 | strokeWidth: '2', 971 | }, 972 | }, 973 | { 974 | tag: 'line', 975 | props: { 976 | id: 'Line 6_6', 977 | x1: '6', 978 | y1: '17', 979 | x2: '6', 980 | y2: '19', 981 | stroke: 'black', 982 | strokeWidth: '2', 983 | }, 984 | }, 985 | { 986 | tag: 'line', 987 | props: { 988 | id: 'Line 6_7', 989 | x1: '18', 990 | y1: '7', 991 | x2: '18', 992 | y2: '9', 993 | stroke: 'black', 994 | strokeWidth: '2', 995 | }, 996 | }, 997 | { 998 | tag: 'line', 999 | props: { 1000 | id: 'Line 6_8', 1001 | x1: '15', 1002 | y1: '11', 1003 | x2: '15', 1004 | y2: '13', 1005 | stroke: 'black', 1006 | strokeWidth: '2', 1007 | }, 1008 | }, 1009 | { 1010 | tag: 'line', 1011 | props: { 1012 | id: 'Line 6_9', 1013 | x1: '18', 1014 | y1: '11', 1015 | x2: '18', 1016 | y2: '13', 1017 | stroke: 'black', 1018 | strokeWidth: '2', 1019 | }, 1020 | }, 1021 | { 1022 | tag: 'rect', 1023 | props: { 1024 | id: 'Rectangle 18', 1025 | x: '14', 1026 | y: '16', 1027 | width: '5', 1028 | height: '4', 1029 | stroke: 'black', 1030 | strokeWidth: '2', 1031 | }, 1032 | }, 1033 | { 1034 | tag: 'line', 1035 | props: { 1036 | id: 'Line 7', 1037 | x1: '24', 1038 | y1: '14', 1039 | x2: '29', 1040 | y2: '14', 1041 | stroke: 'black', 1042 | strokeWidth: '2', 1043 | }, 1044 | }, 1045 | { 1046 | tag: 'line', 1047 | props: { 1048 | id: 'Line 8', 1049 | x1: '25', 1050 | y1: '17', 1051 | x2: '25', 1052 | y2: '20', 1053 | stroke: 'black', 1054 | strokeWidth: '2', 1055 | }, 1056 | }, 1057 | { 1058 | tag: 'line', 1059 | props: { 1060 | id: 'Line 8_2', 1061 | x1: '28', 1062 | y1: '17', 1063 | x2: '28', 1064 | y2: '20', 1065 | stroke: 'black', 1066 | strokeWidth: '2', 1067 | }, 1068 | }, 1069 | ], 1070 | }, 1071 | ], 1072 | } 1073 | export const Like = { 1074 | width: 31, 1075 | height: 27, 1076 | children: [ 1077 | { 1078 | tag: 'g', 1079 | props: { id: 'Like' }, 1080 | children: [ 1081 | { 1082 | tag: 'rect', 1083 | props: { 1084 | width: '30.0483', 1085 | height: '25', 1086 | fill: 'black', 1087 | fillOpacity: '0', 1088 | transform: 'translate(0.923595 0.970198) scale(0.970198)', 1089 | }, 1090 | }, 1091 | { 1092 | tag: 'path', 1093 | props: { 1094 | id: 'Rectangle 22', 1095 | d: 1096 | 'M11.6426 15.5232V9.70198C11.6426 8.63033 12.5114 7.76159 13.583 7.76159V7.76159C14.6547 7.76159 15.5234 8.63033 15.5234 9.70198L15.5234 13.7984', 1097 | stroke: 'black', 1098 | strokeWidth: '2', 1099 | }, 1100 | }, 1101 | { 1102 | tag: 'path', 1103 | props: { 1104 | id: 'Rectangle 22_2', 1105 | d: 1106 | 'M11.6426 11.1573V4.85099C11.6426 3.77934 10.7739 2.91059 9.70225 2.91059V2.91059C8.6306 2.91059 7.76185 3.77934 7.76185 4.85099L7.76185 17.4636C7.76185 21.7502 11.2368 25.2252 15.5234 25.2252V25.2252C19.81 25.2252 23.285 21.7502 23.285 17.4636V14.553', 1107 | stroke: 'black', 1108 | strokeWidth: '2', 1109 | }, 1110 | }, 1111 | { 1112 | tag: 'path', 1113 | props: { 1114 | id: 'Rectangle 22_3', 1115 | d: 1116 | 'M15.5234 14.553V9.70198C15.5234 8.63033 16.3922 7.76159 17.4638 7.76159V7.76159C18.5355 7.76159 19.4042 8.63033 19.4042 9.70198L19.4042 13.0438', 1117 | stroke: 'black', 1118 | strokeWidth: '2', 1119 | }, 1120 | }, 1121 | { 1122 | tag: 'path', 1123 | props: { 1124 | id: 'Rectangle 22_4', 1125 | d: 1126 | 'M19.4042 17.4636H13.583C12.5114 17.4636 11.6426 16.5948 11.6426 15.5232V15.5232C11.6426 14.4515 12.5114 13.5828 13.583 13.5828L19.4042 13.5828C21.5475 13.5828 23.285 15.3203 23.285 17.4636V17.4636', 1127 | stroke: 'black', 1128 | strokeWidth: '2', 1129 | strokeLinecap: 'round', 1130 | }, 1131 | }, 1132 | { 1133 | tag: 'path', 1134 | props: { 1135 | id: 'Rectangle 22_5', 1136 | d: 1137 | 'M19.4042 9.70198V2.91059C19.4042 1.83894 20.273 0.970198 21.3446 0.970198V0.970198C22.4163 0.970198 23.285 1.83894 23.285 2.91059V15.5232', 1138 | stroke: 'black', 1139 | strokeWidth: '2', 1140 | }, 1141 | }, 1142 | { 1143 | tag: 'path', 1144 | props: { 1145 | id: 'Vector 8', 1146 | d: 1147 | 'M17.4638 21.3444C17.4638 21.8802 17.0295 22.3146 16.4936 22.3146C15.9578 22.3146 15.5234 21.8802 15.5234 21.3444H17.4638ZM17.4638 20.3742V21.3444H15.5234V20.3742H17.4638ZM19.4042 18.4338C18.3326 18.4338 17.4638 19.3025 17.4638 20.3742H15.5234C15.5234 18.2309 17.2609 16.4934 19.4042 16.4934V18.4338Z', 1148 | fill: 'black', 1149 | }, 1150 | }, 1151 | { 1152 | tag: 'path', 1153 | props: { 1154 | id: 'Line 3', 1155 | d: 'M3.88106 5.82119L0.970465 4.85099', 1156 | stroke: 'white', 1157 | strokeWidth: '2', 1158 | strokeLinecap: 'round', 1159 | }, 1160 | }, 1161 | { 1162 | tag: 'path', 1163 | props: { 1164 | id: 'Line 3_2', 1165 | d: 'M3.76585 12.1275L0.970465 13.2449', 1166 | stroke: 'white', 1167 | strokeWidth: '2', 1168 | strokeLinecap: 'round', 1169 | }, 1170 | }, 1171 | { 1172 | tag: 'path', 1173 | props: { 1174 | id: 'Line 3_3', 1175 | d: 'M27.1189 5.82119L30.0295 4.85099', 1176 | stroke: 'white', 1177 | strokeWidth: '2', 1178 | strokeLinecap: 'round', 1179 | }, 1180 | }, 1181 | { 1182 | tag: 'path', 1183 | props: { 1184 | id: 'Line 3_4', 1185 | d: 'M27.2342 12.1275L30.0295 13.2449', 1186 | stroke: 'white', 1187 | strokeWidth: '2', 1188 | strokeLinecap: 'round', 1189 | }, 1190 | }, 1191 | ], 1192 | }, 1193 | ], 1194 | } 1195 | export const GridView = { 1196 | width: 26, 1197 | height: 26, 1198 | children: [ 1199 | { 1200 | tag: 'g', 1201 | props: { id: 'Grid View' }, 1202 | children: [ 1203 | { 1204 | tag: 'rect', 1205 | props: { 1206 | width: '24', 1207 | height: '24', 1208 | fill: 'black', 1209 | fillOpacity: '0', 1210 | transform: 'translate(1 1)', 1211 | }, 1212 | }, 1213 | { 1214 | tag: 'rect', 1215 | props: { 1216 | id: 'Rectangle 24', 1217 | x: '1', 1218 | y: '1', 1219 | width: '10', 1220 | height: '10', 1221 | fill: 'white', 1222 | }, 1223 | }, 1224 | { 1225 | tag: 'rect', 1226 | props: { 1227 | id: 'Rectangle 24_2', 1228 | x: '1', 1229 | y: '15', 1230 | width: '10', 1231 | height: '10', 1232 | fill: 'white', 1233 | }, 1234 | }, 1235 | { 1236 | tag: 'rect', 1237 | props: { 1238 | id: 'Rectangle 24_3', 1239 | x: '15', 1240 | y: '1', 1241 | width: '10', 1242 | height: '10', 1243 | fill: 'white', 1244 | }, 1245 | }, 1246 | { 1247 | tag: 'rect', 1248 | props: { 1249 | id: 'Rectangle 24_4', 1250 | x: '15', 1251 | y: '15', 1252 | width: '10', 1253 | height: '10', 1254 | fill: 'white', 1255 | }, 1256 | }, 1257 | { 1258 | tag: 'rect', 1259 | props: { 1260 | id: 'Rectangle 24_5', 1261 | x: '1', 1262 | y: '1', 1263 | width: '10', 1264 | height: '10', 1265 | stroke: 'black', 1266 | strokeWidth: '2', 1267 | }, 1268 | }, 1269 | { 1270 | tag: 'rect', 1271 | props: { 1272 | id: 'Rectangle 24_6', 1273 | x: '1', 1274 | y: '15', 1275 | width: '10', 1276 | height: '10', 1277 | stroke: 'black', 1278 | strokeWidth: '2', 1279 | }, 1280 | }, 1281 | { 1282 | tag: 'rect', 1283 | props: { 1284 | id: 'Rectangle 24_7', 1285 | x: '15', 1286 | y: '1', 1287 | width: '10', 1288 | height: '10', 1289 | stroke: 'black', 1290 | strokeWidth: '2', 1291 | }, 1292 | }, 1293 | { 1294 | tag: 'rect', 1295 | props: { 1296 | id: 'Rectangle 24_8', 1297 | x: '15', 1298 | y: '15', 1299 | width: '10', 1300 | height: '10', 1301 | stroke: 'black', 1302 | strokeWidth: '2', 1303 | }, 1304 | }, 1305 | ], 1306 | }, 1307 | ], 1308 | } 1309 | export const Review = { 1310 | width: 30, 1311 | height: 25, 1312 | children: [ 1313 | { 1314 | tag: 'g', 1315 | props: { id: 'Review' }, 1316 | children: [ 1317 | { 1318 | tag: 'rect', 1319 | props: { 1320 | width: '28', 1321 | height: '24', 1322 | fill: 'black', 1323 | fillOpacity: '0', 1324 | transform: 'translate(1.1667) scale(0.988093)', 1325 | }, 1326 | }, 1327 | { 1328 | tag: 'path', 1329 | props: { 1330 | id: 'Ellipse 9', 1331 | d: 1332 | 'M27.8452 15.8095C27.8452 16.7976 22.0942 23.7142 15 23.7142C7.90579 23.7142 2.15479 16.7976 2.15479 15.8095C2.15479 14.8214 7.90579 7.90475 15 7.90475C22.0942 7.90475 27.8452 14.8214 27.8452 15.8095Z', 1333 | stroke: 'black', 1334 | strokeWidth: '2', 1335 | }, 1336 | }, 1337 | { 1338 | tag: 'circle', 1339 | props: { 1340 | id: 'Ellipse 11', 1341 | cx: '15', 1342 | cy: '13.8333', 1343 | r: '5.92856', 1344 | stroke: 'black', 1345 | strokeWidth: '2', 1346 | }, 1347 | }, 1348 | { 1349 | tag: 'circle', 1350 | props: { 1351 | id: 'Ellipse 11_2', 1352 | cx: '15', 1353 | cy: '13.8333', 1354 | r: '2.96428', 1355 | fill: 'black', 1356 | }, 1357 | }, 1358 | { 1359 | tag: 'line', 1360 | props: { 1361 | id: 'Line 9', 1362 | x1: '15', 1363 | y1: '3.95237', 1364 | x2: '15', 1365 | y2: '0.988093', 1366 | stroke: 'white', 1367 | strokeWidth: '2', 1368 | strokeLinecap: 'round', 1369 | }, 1370 | }, 1371 | { 1372 | tag: 'line', 1373 | props: { 1374 | id: 'Line 9_2', 1375 | x1: '8.56361', 1376 | y1: '5.0337', 1377 | x2: '7.51067', 1378 | y2: '2.26273', 1379 | stroke: 'white', 1380 | strokeWidth: '2', 1381 | strokeLinecap: 'round', 1382 | }, 1383 | }, 1384 | { 1385 | tag: 'line', 1386 | props: { 1387 | id: 'Line 9_3', 1388 | x1: '2.7992', 1389 | y1: '8.6731', 1390 | x2: '0.988144', 1391 | y2: '6.32639', 1392 | stroke: 'white', 1393 | strokeWidth: '2', 1394 | strokeLinecap: 'round', 1395 | }, 1396 | }, 1397 | { 1398 | tag: 'line', 1399 | props: { 1400 | id: 'Line 9_4', 1401 | x1: '21.4364', 1402 | y1: '5.0337', 1403 | x2: '22.4893', 1404 | y2: '2.26273', 1405 | stroke: 'white', 1406 | strokeWidth: '2', 1407 | strokeLinecap: 'round', 1408 | }, 1409 | }, 1410 | { 1411 | tag: 'line', 1412 | props: { 1413 | id: 'Line 9_5', 1414 | x1: '27.2008', 1415 | y1: '8.6731', 1416 | x2: '29.0119', 1417 | y2: '6.32639', 1418 | stroke: 'white', 1419 | strokeWidth: '2', 1420 | strokeLinecap: 'round', 1421 | }, 1422 | }, 1423 | ], 1424 | }, 1425 | ], 1426 | } 1427 | export const Delete = { 1428 | width: 26, 1429 | height: 26, 1430 | children: [ 1431 | { 1432 | tag: 'g', 1433 | props: { id: 'Delete' }, 1434 | children: [ 1435 | { 1436 | tag: 'rect', 1437 | props: { 1438 | width: '24', 1439 | height: '24', 1440 | fill: 'black', 1441 | fillOpacity: '0', 1442 | transform: 'translate(1 1)', 1443 | }, 1444 | }, 1445 | { 1446 | tag: 'path', 1447 | props: { 1448 | id: 'Line 10', 1449 | d: 'M8 18L18 8', 1450 | stroke: 'black', 1451 | strokeWidth: '2', 1452 | strokeLinecap: 'round', 1453 | }, 1454 | }, 1455 | { 1456 | tag: 'path', 1457 | props: { 1458 | id: 'Line 11', 1459 | d: 'M8 8L18 18', 1460 | stroke: 'black', 1461 | strokeWidth: '2', 1462 | strokeLinecap: 'round', 1463 | }, 1464 | }, 1465 | { 1466 | tag: 'circle', 1467 | props: { 1468 | id: 'Ellipse 12', 1469 | cx: '13', 1470 | cy: '13', 1471 | r: '12', 1472 | stroke: 'white', 1473 | strokeWidth: '2', 1474 | }, 1475 | }, 1476 | ], 1477 | }, 1478 | ], 1479 | } 1480 | export const Reply = { 1481 | width: 27, 1482 | height: 19, 1483 | children: [ 1484 | { 1485 | tag: 'g', 1486 | props: { id: 'Reply' }, 1487 | children: [ 1488 | { 1489 | tag: 'rect', 1490 | props: { 1491 | width: '26', 1492 | height: '17.5', 1493 | fill: 'black', 1494 | fillOpacity: '0', 1495 | transform: 'translate(0.964286 0.482158) scale(0.964286)', 1496 | }, 1497 | }, 1498 | { 1499 | tag: 'path', 1500 | props: { 1501 | id: 'Rectangle 25', 1502 | d: 'M12.5357 0.9643L20.25 7.7143L12.5357 14.4643', 1503 | stroke: 'black', 1504 | strokeWidth: '2', 1505 | strokeLinecap: 'round', 1506 | strokeLinejoin: 'round', 1507 | }, 1508 | }, 1509 | { 1510 | tag: 'path', 1511 | props: { 1512 | id: 'Vector 7', 1513 | d: 1514 | 'M0 17.3572C0 17.8897 0.431725 18.3214 0.964286 18.3214C1.49685 18.3214 1.92857 17.8897 1.92857 17.3572H0ZM20.25 6.75002H8.67857V8.67859H20.25V6.75002ZM0 15.4286V17.3572H1.92857V15.4286H0ZM8.67857 6.75002C3.88553 6.75002 0 10.6355 0 15.4286H1.92857C1.92857 11.7007 4.95065 8.67859 8.67857 8.67859V6.75002Z', 1515 | fill: 'black', 1516 | }, 1517 | }, 1518 | { 1519 | tag: 'path', 1520 | props: { 1521 | id: 'Rectangle 25_2', 1522 | d: 'M18.3214 0.9643L26.0357 7.7143L18.3214 14.4643', 1523 | stroke: 'white', 1524 | strokeWidth: '2', 1525 | strokeLinecap: 'round', 1526 | strokeLinejoin: 'round', 1527 | }, 1528 | }, 1529 | ], 1530 | }, 1531 | ], 1532 | } 1533 | export const ListView = { 1534 | width: 24, 1535 | height: 22, 1536 | children: [ 1537 | { 1538 | tag: 'g', 1539 | props: { id: 'List View' }, 1540 | children: [ 1541 | { 1542 | tag: 'rect', 1543 | props: { 1544 | width: '23', 1545 | height: '20', 1546 | fill: 'black', 1547 | fillOpacity: '0', 1548 | transform: 'translate(1 1)', 1549 | }, 1550 | }, 1551 | { 1552 | tag: 'circle', 1553 | props: { id: 'Ellipse 13', cx: '3', cy: '3', r: '2', fill: 'white' }, 1554 | }, 1555 | { 1556 | tag: 'circle', 1557 | props: { 1558 | id: 'Ellipse 13_2', 1559 | cx: '3', 1560 | cy: '11', 1561 | r: '2', 1562 | fill: 'white', 1563 | }, 1564 | }, 1565 | { 1566 | tag: 'circle', 1567 | props: { 1568 | id: 'Ellipse 13_3', 1569 | cx: '3', 1570 | cy: '19', 1571 | r: '2', 1572 | fill: 'white', 1573 | }, 1574 | }, 1575 | { 1576 | tag: 'circle', 1577 | props: { 1578 | id: 'Ellipse 13_4', 1579 | cx: '3', 1580 | cy: '3', 1581 | r: '2', 1582 | stroke: 'black', 1583 | strokeWidth: '2', 1584 | }, 1585 | }, 1586 | { 1587 | tag: 'line', 1588 | props: { 1589 | id: 'Line 12', 1590 | x1: '9', 1591 | y1: '3', 1592 | x2: '23', 1593 | y2: '3', 1594 | stroke: 'black', 1595 | strokeWidth: '2', 1596 | strokeLinecap: 'round', 1597 | }, 1598 | }, 1599 | { 1600 | tag: 'circle', 1601 | props: { 1602 | id: 'Ellipse 13_5', 1603 | cx: '3', 1604 | cy: '11', 1605 | r: '2', 1606 | stroke: 'black', 1607 | strokeWidth: '2', 1608 | }, 1609 | }, 1610 | { 1611 | tag: 'line', 1612 | props: { 1613 | id: 'Line 12_2', 1614 | x1: '9', 1615 | y1: '11', 1616 | x2: '23', 1617 | y2: '11', 1618 | stroke: 'black', 1619 | strokeWidth: '2', 1620 | strokeLinecap: 'round', 1621 | }, 1622 | }, 1623 | { 1624 | tag: 'circle', 1625 | props: { 1626 | id: 'Ellipse 13_6', 1627 | cx: '3', 1628 | cy: '19', 1629 | r: '2', 1630 | stroke: 'black', 1631 | strokeWidth: '2', 1632 | }, 1633 | }, 1634 | { 1635 | tag: 'line', 1636 | props: { 1637 | id: 'Line 12_3', 1638 | x1: '9', 1639 | y1: '19', 1640 | x2: '23', 1641 | y2: '19', 1642 | stroke: 'black', 1643 | strokeWidth: '2', 1644 | strokeLinecap: 'round', 1645 | }, 1646 | }, 1647 | ], 1648 | }, 1649 | ], 1650 | } 1651 | export const Restore = { 1652 | width: 25, 1653 | height: 22, 1654 | children: [ 1655 | { 1656 | tag: 'g', 1657 | props: { id: 'Restore' }, 1658 | children: [ 1659 | { 1660 | tag: 'rect', 1661 | props: { 1662 | width: '23', 1663 | height: '20', 1664 | fill: 'black', 1665 | fillOpacity: '0', 1666 | transform: 'translate(1 1)', 1667 | }, 1668 | }, 1669 | { 1670 | tag: 'path', 1671 | props: { 1672 | id: 'Vector', 1673 | d: 1674 | 'M21 11C21 16.5 16.5 21 11 21C5.5 21 1 16.5 1 11C1 5.5 5.5 1 11 1C13.8 1 16.3 2.1 18.1 3.9', 1675 | stroke: 'black', 1676 | strokeWidth: '2', 1677 | strokeMiterlimit: '10', 1678 | strokeLinecap: 'round', 1679 | strokeLinejoin: 'round', 1680 | }, 1681 | }, 1682 | { 1683 | tag: 'path', 1684 | props: { 1685 | id: 'Vector_2', 1686 | d: 'M18 12L21 9L24 12', 1687 | stroke: 'black', 1688 | strokeWidth: '2', 1689 | strokeMiterlimit: '10', 1690 | strokeLinecap: 'round', 1691 | strokeLinejoin: 'round', 1692 | }, 1693 | }, 1694 | { 1695 | tag: 'circle', 1696 | props: { 1697 | id: 'Ellipse 14', 1698 | cx: '11', 1699 | cy: '11', 1700 | r: '3', 1701 | fill: 'white', 1702 | }, 1703 | }, 1704 | ], 1705 | }, 1706 | ], 1707 | } 1708 | export const Duplicate = { 1709 | width: 22, 1710 | height: 26, 1711 | children: [ 1712 | { 1713 | tag: 'g', 1714 | props: { id: 'Duplicate' }, 1715 | children: [ 1716 | { 1717 | tag: 'rect', 1718 | props: { 1719 | width: '21', 1720 | height: '25', 1721 | fill: 'black', 1722 | fillOpacity: '0', 1723 | transform: 'translate(1)', 1724 | }, 1725 | }, 1726 | { 1727 | tag: 'path', 1728 | props: { 1729 | id: 'Vector 9', 1730 | d: 'M1 5V23C1 24.1046 1.89543 25 3 25H17', 1731 | stroke: 'black', 1732 | strokeWidth: '2', 1733 | strokeLinecap: 'round', 1734 | }, 1735 | }, 1736 | { 1737 | tag: 'path', 1738 | props: { 1739 | id: 'Vector 10', 1740 | d: 'M5 21V1.5H14.5L21 8V21H5Z', 1741 | fill: 'white', 1742 | }, 1743 | }, 1744 | { 1745 | tag: 'path', 1746 | props: { 1747 | id: 'Vector 10_2', 1748 | d: 1749 | 'M21 8V19C21 20.1046 20.1046 21 19 21H7C5.89543 21 5 20.1046 5 19V3.5C5 2.39543 5.89543 1.5 7 1.5H14.5M21 8L14.5 1.5M21 8H16.5C15.3954 8 14.5 7.10457 14.5 6V1.5', 1750 | stroke: 'black', 1751 | strokeWidth: '2', 1752 | }, 1753 | }, 1754 | { 1755 | tag: 'line', 1756 | props: { 1757 | id: 'Line 4', 1758 | x1: '9', 1759 | y1: '8', 1760 | x2: '11', 1761 | y2: '8', 1762 | stroke: 'black', 1763 | strokeWidth: '2', 1764 | strokeLinecap: 'round', 1765 | }, 1766 | }, 1767 | { 1768 | tag: 'line', 1769 | props: { 1770 | id: 'Line 4_2', 1771 | x1: '9', 1772 | y1: '12', 1773 | x2: '17', 1774 | y2: '12', 1775 | stroke: 'black', 1776 | strokeWidth: '2', 1777 | strokeLinecap: 'round', 1778 | }, 1779 | }, 1780 | { 1781 | tag: 'line', 1782 | props: { 1783 | id: 'Line 4_3', 1784 | x1: '9', 1785 | y1: '16', 1786 | x2: '17', 1787 | y2: '16', 1788 | stroke: 'black', 1789 | strokeWidth: '2', 1790 | strokeLinecap: 'round', 1791 | }, 1792 | }, 1793 | ], 1794 | }, 1795 | ], 1796 | } 1797 | export const Pause = { 1798 | width: 18, 1799 | height: 16, 1800 | children: [ 1801 | { 1802 | tag: 'g', 1803 | props: { id: 'Pause' }, 1804 | children: [ 1805 | { 1806 | tag: 'rect', 1807 | props: { width: '18', height: '16', fill: 'black', fillOpacity: '0' }, 1808 | }, 1809 | { 1810 | tag: 'rect', 1811 | props: { 1812 | id: 'Rectangle 26', 1813 | x: '3', 1814 | y: '3', 1815 | width: '2', 1816 | height: '10', 1817 | fill: 'white', 1818 | }, 1819 | }, 1820 | { 1821 | tag: 'rect', 1822 | props: { 1823 | id: 'Rectangle 26_2', 1824 | x: '13', 1825 | y: '3', 1826 | width: '2', 1827 | height: '10', 1828 | fill: 'white', 1829 | }, 1830 | }, 1831 | { 1832 | tag: 'rect', 1833 | props: { 1834 | id: 'Rectangle 21', 1835 | x: '1', 1836 | y: '1', 1837 | width: '6', 1838 | height: '14', 1839 | rx: '1', 1840 | stroke: 'black', 1841 | strokeWidth: '2', 1842 | strokeLinejoin: 'round', 1843 | }, 1844 | }, 1845 | { 1846 | tag: 'rect', 1847 | props: { 1848 | id: 'Rectangle 21_2', 1849 | x: '11', 1850 | y: '1', 1851 | width: '6', 1852 | height: '14', 1853 | rx: '1', 1854 | stroke: 'black', 1855 | strokeWidth: '2', 1856 | strokeLinejoin: 'round', 1857 | }, 1858 | }, 1859 | ], 1860 | }, 1861 | ], 1862 | } 1863 | export const Stop = { 1864 | width: 16, 1865 | height: 16, 1866 | children: [ 1867 | { 1868 | tag: 'g', 1869 | props: { id: 'Stop' }, 1870 | children: [ 1871 | { 1872 | tag: 'rect', 1873 | props: { width: '16', height: '16', fill: 'black', fillOpacity: '0' }, 1874 | }, 1875 | { 1876 | tag: 'rect', 1877 | props: { 1878 | id: 'Rectangle 21', 1879 | x: '1', 1880 | y: '1', 1881 | width: '14', 1882 | height: '14', 1883 | rx: '1', 1884 | stroke: 'black', 1885 | strokeWidth: '2', 1886 | strokeLinejoin: 'round', 1887 | }, 1888 | }, 1889 | { 1890 | tag: 'rect', 1891 | props: { 1892 | id: 'Rectangle 27', 1893 | x: '4', 1894 | y: '4', 1895 | width: '8', 1896 | height: '8', 1897 | fill: 'white', 1898 | }, 1899 | }, 1900 | ], 1901 | }, 1902 | ], 1903 | } 1904 | export const VolumeHigh = { 1905 | width: 31, 1906 | height: 24, 1907 | children: [ 1908 | { 1909 | tag: 'g', 1910 | props: { id: 'Volume High' }, 1911 | children: [ 1912 | { 1913 | tag: 'rect', 1914 | props: { 1915 | width: '29', 1916 | height: '22', 1917 | fill: 'black', 1918 | fillOpacity: '0', 1919 | transform: 'translate(1 1)', 1920 | }, 1921 | }, 1922 | { 1923 | tag: 'path', 1924 | props: { 1925 | id: 'Vector 10', 1926 | d: 1927 | 'M6 7V8C6.19742 8 6.39043 7.94156 6.5547 7.83205L6 7ZM6 17L6.5547 16.1679C6.39043 16.0584 6.19742 16 6 16V17ZM2 15V9H0V15H2ZM3 8H6V6H3V8ZM6.5547 7.83205L14 2.86852L12.8906 1.20442L5.4453 6.16795L6.5547 7.83205ZM14 2.86852V21.1315H16V2.86852H14ZM14 21.1315L6.5547 16.1679L5.4453 17.8321L12.8906 22.7956L14 21.1315ZM6 16H3V18H6V16ZM0 15C0 16.6569 1.34315 18 3 18V16C2.44772 16 2 15.5523 2 15H0ZM2 9C2 8.44772 2.44772 8 3 8V6C1.34315 6 0 7.34315 0 9H2ZM14 2.86852H16C16 1.27113 14.2197 0.318344 12.8906 1.20442L14 2.86852ZM14 21.1315L12.8906 22.7956C14.2197 23.6817 16 22.7289 16 21.1315H14Z', 1928 | fill: 'black', 1929 | }, 1930 | }, 1931 | { 1932 | tag: 'line', 1933 | props: { 1934 | id: 'Line 13', 1935 | x1: '6', 1936 | y1: '17', 1937 | x2: '6', 1938 | y2: '7', 1939 | stroke: 'black', 1940 | strokeWidth: '2', 1941 | strokeLinecap: 'round', 1942 | }, 1943 | }, 1944 | { 1945 | tag: 'path', 1946 | props: { 1947 | id: 'Ellipse 15', 1948 | d: 'M19 15C20.6569 15 22 13.6569 22 12C22 10.3431 20.6569 9 19 9', 1949 | stroke: 'white', 1950 | strokeWidth: '2', 1951 | strokeLinecap: 'round', 1952 | }, 1953 | }, 1954 | { 1955 | tag: 'path', 1956 | props: { 1957 | id: 'Ellipse 15_2', 1958 | d: 'M19 19C22.866 19 26 15.866 26 12C26 8.13401 22.866 5 19 5', 1959 | stroke: 'white', 1960 | strokeWidth: '2', 1961 | strokeLinecap: 'round', 1962 | }, 1963 | }, 1964 | { 1965 | tag: 'path', 1966 | props: { 1967 | id: 'Ellipse 15_3', 1968 | d: 'M19 23C25.0751 23 30 18.0751 30 12C30 5.92487 25.0751 1 19 1', 1969 | stroke: 'white', 1970 | strokeWidth: '2', 1971 | strokeLinecap: 'round', 1972 | }, 1973 | }, 1974 | ], 1975 | }, 1976 | ], 1977 | } 1978 | export const VolumeLow = { 1979 | width: 23, 1980 | height: 22, 1981 | children: [ 1982 | { 1983 | tag: 'g', 1984 | props: { id: 'Volume Low' }, 1985 | children: [ 1986 | { 1987 | tag: 'rect', 1988 | props: { 1989 | width: '21', 1990 | height: '22', 1991 | fill: 'black', 1992 | fillOpacity: '0', 1993 | transform: 'translate(0.98789 0.133209) scale(0.98789)', 1994 | }, 1995 | }, 1996 | { 1997 | tag: 'path', 1998 | props: { 1999 | id: 'Vector 10', 2000 | d: 2001 | 'M5.92734 6.06055V7.04844C6.12237 7.04844 6.31304 6.99071 6.47532 6.88252L5.92734 6.06055ZM5.92734 15.9394L6.47532 15.1175C6.31304 15.0093 6.12237 14.9516 5.92734 14.9516V15.9394ZM1.97578 13.9637V8.03633H0V13.9637H1.97578ZM2.96367 7.04844H5.92734V5.07266H2.96367V7.04844ZM6.47532 6.88252L13.8305 1.9791L12.7345 0.33515L5.37936 5.23857L6.47532 6.88252ZM13.8305 1.9791V20.0209H15.8062V1.9791H13.8305ZM13.8305 20.0209L6.47532 15.1175L5.37936 16.7614L12.7345 21.6648L13.8305 20.0209ZM5.92734 14.9516H2.96367V16.9273H5.92734V14.9516ZM0 13.9637C0 15.6005 1.32688 16.9273 2.96367 16.9273V14.9516C2.41807 14.9516 1.97578 14.5093 1.97578 13.9637H0ZM1.97578 8.03633C1.97578 7.49073 2.41807 7.04844 2.96367 7.04844V5.07266C1.32688 5.07266 0 6.39954 0 8.03633H1.97578ZM13.8305 1.9791H15.8062C15.8062 0.401052 14.0475 -0.540193 12.7345 0.33515L13.8305 1.9791ZM13.8305 20.0209L12.7345 21.6648C14.0475 22.5402 15.8062 21.5989 15.8062 20.0209H13.8305Z', 2002 | fill: 'black', 2003 | }, 2004 | }, 2005 | { 2006 | tag: 'line', 2007 | props: { 2008 | id: 'Line 13', 2009 | x1: '5.92734', 2010 | y1: '15.9394', 2011 | x2: '5.92734', 2012 | y2: '6.06055', 2013 | stroke: 'black', 2014 | strokeWidth: '2', 2015 | strokeLinecap: 'round', 2016 | }, 2017 | }, 2018 | { 2019 | tag: 'path', 2020 | props: { 2021 | id: 'Ellipse 15', 2022 | d: 2023 | 'M18.7699 13.9637C20.4067 13.9637 21.7336 12.6368 21.7336 11C21.7336 9.36321 20.4067 8.03633 18.7699 8.03633', 2024 | stroke: 'white', 2025 | strokeWidth: '2', 2026 | strokeLinecap: 'round', 2027 | }, 2028 | }, 2029 | ], 2030 | }, 2031 | ], 2032 | } 2033 | export const Friend = { 2034 | width: 30, 2035 | height: 26, 2036 | children: [ 2037 | { 2038 | tag: 'g', 2039 | props: { id: 'Friend' }, 2040 | children: [ 2041 | { 2042 | tag: 'rect', 2043 | props: { 2044 | width: '28.1683', 2045 | height: '24.9987', 2046 | fill: 'black', 2047 | fillOpacity: '0', 2048 | transform: 'translate(0.963004 0.963004) scale(0.963004)', 2049 | }, 2050 | }, 2051 | { 2052 | tag: 'path', 2053 | props: { 2054 | id: 'Ellipse 8', 2055 | d: 2056 | 'M5.77802 8.66704C5.77802 7.60333 6.64033 6.74103 7.70403 6.74103C8.76774 6.74103 9.63004 7.60333 9.63004 8.66704', 2057 | stroke: 'black', 2058 | strokeWidth: '2', 2059 | strokeLinecap: 'round', 2060 | }, 2061 | }, 2062 | { 2063 | tag: 'path', 2064 | props: { 2065 | id: 'Ellipse 8_2', 2066 | d: 2067 | 'M13.4821 8.66704C13.4821 7.60333 14.3444 6.74103 15.4081 6.74103C16.4718 6.74103 17.3341 7.60333 17.3341 8.66704', 2068 | stroke: 'black', 2069 | strokeWidth: '2', 2070 | strokeLinecap: 'round', 2071 | }, 2072 | }, 2073 | { 2074 | tag: 'path', 2075 | props: { 2076 | id: 'Subtract', 2077 | fillRule: 'evenodd', 2078 | clipRule: 'evenodd', 2079 | d: 2080 | 'M7.92341 17.0126C8.45236 15.5167 9.87905 14.4451 11.5561 14.4451C13.2331 14.4451 14.6598 15.5167 15.1887 17.0126C16.2618 16.144 17.0176 14.8988 17.2549 13.478C17.3425 12.9534 16.9029 12.5191 16.3711 12.5191H6.74105C6.2092 12.5191 5.76964 12.9534 5.85726 13.478C6.09457 14.8988 6.85031 16.144 7.92341 17.0126Z', 2081 | fill: 'black', 2082 | }, 2083 | }, 2084 | { 2085 | tag: 'path', 2086 | props: { 2087 | id: 'Ellipse 8_3', 2088 | d: 2089 | 'M11.556 18.2971C14.4205 18.2971 16.7981 16.2127 17.2549 13.478C17.3425 12.9534 16.9029 12.5191 16.3711 12.5191H6.74103C6.20918 12.5191 5.76961 12.9534 5.85724 13.478C6.31404 16.2127 8.69163 18.2971 11.556 18.2971Z', 2090 | stroke: 'black', 2091 | strokeWidth: '2', 2092 | }, 2093 | }, 2094 | { 2095 | tag: 'circle', 2096 | props: { 2097 | id: 'Ellipse 8_4', 2098 | cx: '11.556', 2099 | cy: '11.556', 2100 | r: '10.593', 2101 | stroke: 'black', 2102 | strokeWidth: '2', 2103 | }, 2104 | }, 2105 | { 2106 | tag: 'path', 2107 | props: { 2108 | id: 'Line 3', 2109 | d: 'M25.201 17.4496L28.0714 18.4669', 2110 | stroke: 'white', 2111 | strokeWidth: '2', 2112 | strokeLinecap: 'round', 2113 | }, 2114 | }, 2115 | { 2116 | tag: 'path', 2117 | props: { 2118 | id: 'Line 3_2', 2119 | d: 'M21.4418 22.4559L22.9476 25.0368', 2120 | stroke: 'white', 2121 | strokeWidth: '2', 2122 | strokeLinecap: 'round', 2123 | }, 2124 | }, 2125 | ], 2126 | }, 2127 | ], 2128 | } 2129 | export const FastForward = { 2130 | width: 21, 2131 | height: 16, 2132 | children: [ 2133 | { 2134 | tag: 'g', 2135 | props: { id: 'Fast-Forward' }, 2136 | children: [ 2137 | { 2138 | tag: 'rect', 2139 | props: { 2140 | width: '20.888', 2141 | height: '15', 2142 | fill: 'black', 2143 | fillOpacity: '0', 2144 | transform: 'translate(0 0.479729) scale(0.959429)', 2145 | }, 2146 | }, 2147 | { 2148 | tag: 'path', 2149 | props: { 2150 | id: 'Rectangle 25', 2151 | d: 'M6.716 0.959443L14.3914 7.67545L6.716 14.3914', 2152 | stroke: 'black', 2153 | strokeWidth: '2', 2154 | strokeLinecap: 'round', 2155 | strokeLinejoin: 'round', 2156 | }, 2157 | }, 2158 | { 2159 | tag: 'path', 2160 | props: { 2161 | id: 'Rectangle 25_2', 2162 | d: 'M12.3651 0.959443L20.0406 7.67545L12.3651 14.3914', 2163 | stroke: 'black', 2164 | strokeWidth: '2', 2165 | strokeLinecap: 'round', 2166 | strokeLinejoin: 'round', 2167 | }, 2168 | }, 2169 | { 2170 | tag: 'path', 2171 | props: { 2172 | id: 'Vector 11', 2173 | d: 'M5.75657 11.5132V3.83773L9.59429 7.67545L5.75657 11.5132Z', 2174 | fill: 'white', 2175 | }, 2176 | }, 2177 | ], 2178 | }, 2179 | ], 2180 | } 2181 | export const User = { 2182 | width: 30, 2183 | height: 23, 2184 | children: [ 2185 | { 2186 | tag: 'g', 2187 | props: { id: 'User' }, 2188 | children: [ 2189 | { 2190 | tag: 'rect', 2191 | props: { 2192 | width: '29.0483', 2193 | height: '22', 2194 | fill: 'black', 2195 | fillOpacity: '0', 2196 | transform: 'translate(0.922664) scale(0.969236)', 2197 | }, 2198 | }, 2199 | { 2200 | tag: 'path', 2201 | props: { 2202 | id: 'Vector 12', 2203 | d: 2204 | 'M6.76149 18.4155V21.3232H23.2385V18.4155C23.2385 16.2743 21.5027 14.5385 19.3616 14.5385H10.6384C8.49726 14.5385 6.76149 16.2743 6.76149 18.4155Z', 2205 | fill: 'white', 2206 | }, 2207 | }, 2208 | { 2209 | tag: 'path', 2210 | props: { 2211 | id: 'Line 3', 2212 | d: 'M4.84643 3.68369L1.93872 2.71445', 2213 | stroke: 'white', 2214 | strokeWidth: '2', 2215 | strokeLinecap: 'round', 2216 | }, 2217 | }, 2218 | { 2219 | tag: 'path', 2220 | props: { 2221 | id: 'Line 3_2', 2222 | d: 'M3.7621 9.98372L0.969487 11.1', 2223 | stroke: 'white', 2224 | strokeWidth: '2', 2225 | strokeLinecap: 'round', 2226 | }, 2227 | }, 2228 | { 2229 | tag: 'path', 2230 | props: { 2231 | id: 'Line 3_3', 2232 | d: 'M25.1536 3.68369L28.0613 2.71445', 2233 | stroke: 'white', 2234 | strokeWidth: '2', 2235 | strokeLinecap: 'round', 2236 | }, 2237 | }, 2238 | { 2239 | tag: 'path', 2240 | props: { 2241 | id: 'Line 3_4', 2242 | d: 'M26.2379 9.98372L29.0305 11.1', 2243 | stroke: 'white', 2244 | strokeWidth: '2', 2245 | strokeLinecap: 'round', 2246 | }, 2247 | }, 2248 | { 2249 | tag: 'path', 2250 | props: { 2251 | id: 'Vector 4', 2252 | d: 2253 | 'M5.79226 21.3232C5.79226 21.8585 6.2262 22.2924 6.76149 22.2924C7.29679 22.2924 7.73073 21.8585 7.73073 21.3232H5.79226ZM22.2693 21.3232C22.2693 21.8585 22.7032 22.2924 23.2385 22.2924C23.7738 22.2924 24.2077 21.8585 24.2077 21.3232H22.2693ZM7.73073 21.3232V20.354H5.79226V21.3232H7.73073ZM12.5769 15.5078H17.4231V13.5693H12.5769V15.5078ZM22.2693 20.354V21.3232H24.2077V20.354H22.2693ZM7.73073 20.354C7.73073 17.6775 9.90044 15.5078 12.5769 15.5078V13.5693C8.82985 13.5693 5.79226 16.6069 5.79226 20.354H7.73073ZM17.4231 15.5078C20.0996 15.5078 22.2693 17.6775 22.2693 20.354H24.2077C24.2077 16.6069 21.1701 13.5693 17.4231 13.5693V15.5078Z', 2254 | fill: 'black', 2255 | }, 2256 | }, 2257 | { 2258 | tag: 'circle', 2259 | props: { 2260 | id: 'Ellipse 10', 2261 | cx: '15', 2262 | cy: '6.30003', 2263 | r: '5.30003', 2264 | stroke: 'black', 2265 | strokeWidth: '2', 2266 | }, 2267 | }, 2268 | { 2269 | tag: 'rect', 2270 | props: { 2271 | id: 'Rectangle 17', 2272 | x: '12.6077', 2273 | y: '11.6616', 2274 | width: '4.78465', 2275 | height: '2.84618', 2276 | stroke: 'black', 2277 | strokeWidth: '2', 2278 | }, 2279 | }, 2280 | { 2281 | tag: 'path', 2282 | props: { 2283 | id: 'Vector 2', 2284 | d: 2285 | 'M21.9138 2.68862C22.3281 2.34965 22.3891 1.73901 22.0502 1.32472C21.7112 0.91042 21.1006 0.849356 20.6863 1.18832L21.9138 2.68862ZM10.9223 2.62383C11.776 3.47754 13.3168 4.46183 15.257 4.7508C17.2394 5.04604 19.5729 4.60386 21.9138 2.68862L20.6863 1.18832C18.7625 2.76233 16.9768 3.04708 15.5426 2.83347C14.0662 2.61359 12.8932 1.85326 12.293 1.25312L10.9223 2.62383Z', 2286 | fill: 'black', 2287 | }, 2288 | }, 2289 | ], 2290 | }, 2291 | ], 2292 | } 2293 | export const Menu = { 2294 | width: 18, 2295 | height: 21, 2296 | children: [ 2297 | { 2298 | tag: 'g', 2299 | props: { id: 'Menu' }, 2300 | children: [ 2301 | { 2302 | tag: 'rect', 2303 | props: { 2304 | width: '18', 2305 | height: '19', 2306 | fill: 'black', 2307 | fillOpacity: '0', 2308 | transform: 'translate(0 2)', 2309 | }, 2310 | }, 2311 | { 2312 | tag: 'path', 2313 | props: { id: 'Vector 13', d: 'M13 16H5L9 21L13 16Z', fill: 'white' }, 2314 | }, 2315 | { 2316 | tag: 'line', 2317 | props: { 2318 | id: 'Line 12', 2319 | x1: '1', 2320 | y1: '1', 2321 | x2: '17', 2322 | y2: '1', 2323 | stroke: 'black', 2324 | strokeWidth: '2', 2325 | strokeLinecap: 'round', 2326 | }, 2327 | }, 2328 | { 2329 | tag: 'line', 2330 | props: { 2331 | id: 'Line 12_2', 2332 | x1: '1', 2333 | y1: '7', 2334 | x2: '17', 2335 | y2: '7', 2336 | stroke: 'black', 2337 | strokeWidth: '2', 2338 | strokeLinecap: 'round', 2339 | }, 2340 | }, 2341 | { 2342 | tag: 'line', 2343 | props: { 2344 | id: 'Line 12_3', 2345 | x1: '1', 2346 | y1: '13', 2347 | x2: '17', 2348 | y2: '13', 2349 | stroke: 'black', 2350 | strokeWidth: '2', 2351 | strokeLinecap: 'round', 2352 | }, 2353 | }, 2354 | ], 2355 | }, 2356 | ], 2357 | } 2358 | -------------------------------------------------------------------------------- /examples/react-web-example/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /examples/react-web-example/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 | -------------------------------------------------------------------------------- /examples/react-web-example/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/react-web-example/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 | 39 | // Add some additional logging to localhost, pointing developers to the 40 | // service worker/PWA documentation. 41 | navigator.serviceWorker.ready.then(() => { 42 | console.log( 43 | 'This web app is being served cache-first by a service ' + 44 | 'worker. To learn more, visit https://goo.gl/SC7cgQ' 45 | ) 46 | }) 47 | } else { 48 | // Is not local host. Just register service worker 49 | registerValidSW(swUrl) 50 | } 51 | }) 52 | } 53 | } 54 | 55 | function registerValidSW(swUrl) { 56 | navigator.serviceWorker 57 | .register(swUrl) 58 | .then((registration) => { 59 | registration.onupdatefound = () => { 60 | const installingWorker = registration.installing 61 | installingWorker.onstatechange = () => { 62 | if (installingWorker.state === 'installed') { 63 | if (navigator.serviceWorker.controller) { 64 | // At this point, the old content will have been purged and 65 | // the fresh content will have been added to the cache. 66 | // It's the perfect time to display a "New content is 67 | // available; please refresh." message in your web app. 68 | console.log('New content is available; please refresh.') 69 | } else { 70 | // At this point, everything has been precached. 71 | // It's the perfect time to display a 72 | // "Content is cached for offline use." message. 73 | console.log('Content is cached for offline use.') 74 | } 75 | } 76 | } 77 | } 78 | }) 79 | .catch((error) => { 80 | console.error('Error during service worker registration:', error) 81 | }) 82 | } 83 | 84 | function checkValidServiceWorker(swUrl) { 85 | // Check if the service worker can be found. If it can't reload the page. 86 | fetch(swUrl) 87 | .then((response) => { 88 | // Ensure service worker exists, and that we really are getting a JS file. 89 | if ( 90 | response.status === 404 || 91 | response.headers.get('content-type').indexOf('javascript') === -1 92 | ) { 93 | // No service worker found. Probably a different app. Reload the page. 94 | navigator.serviceWorker.ready.then((registration) => { 95 | registration.unregister().then(() => { 96 | window.location.reload() 97 | }) 98 | }) 99 | } else { 100 | // Service worker found. Proceed as normal. 101 | registerValidSW(swUrl) 102 | } 103 | }) 104 | .catch(() => { 105 | console.log( 106 | 'No internet connection found. App is running in offline mode.' 107 | ) 108 | }) 109 | } 110 | 111 | export function unregister() { 112 | if ('serviceWorker' in navigator) { 113 | navigator.serviceWorker.ready.then((registration) => { 114 | registration.unregister() 115 | }) 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "workspaces": [ 4 | "examples/*", 5 | "packages/*" 6 | ], 7 | "scripts": { 8 | "unicon": "yarn workspace unicon", 9 | "unicon-cli": "yarn workspace unicon-cli", 10 | "prettier": "prettier '**/*.{js,jsx,json,md,mdx}' --write" 11 | }, 12 | "devDependencies": { 13 | "prettier": "2.1.1" 14 | }, 15 | "prettier": { 16 | "semi": false, 17 | "singleQuote": true, 18 | "trailingComma": "es5" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /packages/unicon-cli/README.md: -------------------------------------------------------------------------------- 1 | # unicon-cli 2 | 3 | An opinionated cli tool that uses [`unicon`](../unicon) to create a file[s] of 4 | exported SVG fragments. 5 | 6 | ## Install 7 | 8 | ``` 9 | yarn add unicon-cli --dev 10 | ``` 11 | 12 | ``` 13 | npm install unicon-cli --save-dev 14 | ``` 15 | 16 | ## Commands 17 | 18 | ### Figma 19 | 20 | `unicon figma ` 21 | 22 | Accepts a Figma file id. Collects all of the components in the file. 23 | 24 | #### Required setup 25 | 26 | `FIGMA_TOKEN=` 27 | 28 | You must include a 29 | [personal access token](https://www.figma.com/developers/docs#auth-dev-token) in 30 | a `.env` at the root of your project or as an environment variable. 31 | 32 | ### Sketch 33 | 34 | `unicon sketch ` 35 | 36 | Accepts a path to a Sketch file. Collects all of the artboards in the file. 37 | 38 | ### Folder 39 | 40 | `unicon folder ` 41 | 42 | Accepts a path to a directory of svgs. 43 | 44 | ## Options 45 | 46 | ### `—output` 47 | 48 | Folder to output parsed SVGs. Defaults to `cwd`. 49 | 50 | ### `—group` 51 | 52 | When `true`, groups returned SVG data by pages or sub directories. 53 | 54 | ### `—transformer` 55 | 56 | Path to a file that exports a method to transform each SVG. If using a package 57 | like [`unicon-transformer-json`](../unicon-transformer-json), you can omit 58 | `unicon-transformer` and just pass the name of the transformer, and it will be 59 | resolved properly. 60 | 61 | ### `—watch` 62 | 63 | Builds SVG exports file on source directory/file update. 64 | 65 | ## Usage with NPM scripts 66 | 67 | ```json 68 | { 69 | "scripts": { 70 | "icons": "unicon figma 5XaqhenkjvPmJprGZMFw2ge --name icons --transformer json" 71 | } 72 | } 73 | ``` 74 | 75 | ### Example Output 76 | 77 | ```js 78 | export const Archive = { width: 24, height: 24, }, children: [...] } 79 | export const Trash = { width: 24, height: 24, children: [...] } 80 | ``` 81 | -------------------------------------------------------------------------------- /packages/unicon-cli/bin/unicon.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | require('../src') 4 | -------------------------------------------------------------------------------- /packages/unicon-cli/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "unicon-cli", 3 | "version": "0.0.3", 4 | "license": "MIT", 5 | "bin": { 6 | "unicon": "./bin/unicon.js" 7 | }, 8 | "dependencies": { 9 | "dotenv": "^8.2.0", 10 | "meow": "^7.1.1", 11 | "unicon": "^0.2.1" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/unicon-cli/src/index.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | require('dotenv').load() 4 | 5 | const fs = require('fs') 6 | const path = require('path') 7 | const meow = require('meow') 8 | const { 9 | setFigmaToken, 10 | getSvgsFromFigma, 11 | getSvgsFromSketch, 12 | getSvgsFromFolder, 13 | watchFigmaFile, 14 | watchSketchFile, 15 | watchFolder, 16 | } = require('unicon') 17 | const { generateImportsFromSvgs } = require('./utils') 18 | 19 | const cli = meow( 20 | ` 21 | unicon 22 | 23 | Figma 24 | $ unicon figma 25 | 26 | Sketch 27 | $ unicon sketch 28 | 29 | Folder 30 | $ unicon folder 31 | 32 | Options 33 | --name name of the generated JSON file 34 | --page name of the page to get components from (defaults to all pages) 35 | --output output directory (defaults to cwd) 36 | --transformer path to transform function 37 | --group whether or not the data should be grouped by pages/sub-directory 38 | --watch whether or not the file/directory should be watched for changes 39 | `, 40 | { 41 | flags: { 42 | name: { 43 | type: 'string', 44 | }, 45 | page: { 46 | type: 'string', 47 | }, 48 | output: { 49 | type: 'string', 50 | }, 51 | transformer: { 52 | type: 'string', 53 | }, 54 | group: { 55 | type: 'boolean', 56 | }, 57 | watch: { 58 | type: 'boolean', 59 | }, 60 | }, 61 | } 62 | ) 63 | 64 | const [command, source] = cli.input 65 | const options = Object.assign( 66 | { 67 | name: 'components', 68 | output: '', 69 | }, 70 | cli.flags 71 | ) 72 | options.output = path.resolve(options.output) 73 | 74 | if (!command || !source) { 75 | cli.showHelp(0) 76 | } else { 77 | const getSvgsFromTool = { 78 | figma: getSvgsFromFigma, 79 | sketch: getSvgsFromSketch, 80 | folder: getSvgsFromFolder, 81 | }[command] 82 | const toolOptions = { 83 | page: options.page, 84 | group: options.group, 85 | } 86 | 87 | if (command === 'figma') { 88 | if (!process.env.FIGMA_TOKEN) { 89 | console.error('You must define a FIGMA_TOKEN environment variable.') 90 | process.exit(1) 91 | } else { 92 | setFigmaToken(process.env.FIGMA_TOKEN) 93 | } 94 | } 95 | 96 | if (options.transformer) { 97 | try { 98 | toolOptions.transformSvg = require(path.resolve(options.transformer)) 99 | } catch (err) { 100 | try { 101 | toolOptions.transformSvg = require(path.resolve( 102 | `./node_modules/unicon-transformer-${options.transformer}` 103 | )) 104 | } catch (err) { 105 | console.error( 106 | `Transformer could not be found. Make sure path is valid or try installing ${`unicon-transformer-${options.transformer}`}` 107 | ) 108 | } 109 | } 110 | } 111 | 112 | const generateFileFromSvg = () => 113 | getSvgsFromTool(source, toolOptions).then((svgs) => 114 | generateImportsFromSvgs({ 115 | name: options.name, 116 | output: options.output, 117 | group: options.group, 118 | svgs, 119 | }) 120 | ) 121 | if (options.watch) { 122 | const watchSource = { 123 | figma: watchFigmaFile, 124 | sketch: watchSketchFile, 125 | folder: watchFolder, 126 | }[command] 127 | watchSource(source, generateFileFromSvg) 128 | } 129 | generateFileFromSvg() 130 | } 131 | -------------------------------------------------------------------------------- /packages/unicon-cli/src/utils.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | const path = require('path') 3 | const pascalcase = require('pascalcase') 4 | const util = require('util') 5 | 6 | function writeSVGFile(output, filename, data) { 7 | fs.writeFileSync( 8 | path.resolve(output, filename + '.js'), 9 | Object.keys(data) 10 | .map( 11 | (key) => 12 | `export const ${pascalcase(key)} = ${util.inspect(data[key], { 13 | breakLength: Infinity, 14 | depth: null, 15 | })}` 16 | ) 17 | .join('\n') 18 | ) 19 | } 20 | 21 | function generateImportsFromSvgs({ name, output, svgs, group }) { 22 | if (group) { 23 | Object.keys(svgs).forEach((key) => writeSVGFile(output, key, svgs[key])) 24 | } else { 25 | writeSVGFile(output, name, svgs) 26 | } 27 | } 28 | 29 | module.exports = { 30 | generateImportsFromSvgs, 31 | } 32 | -------------------------------------------------------------------------------- /packages/unicon-react/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | /dist/ 3 | /lib/ -------------------------------------------------------------------------------- /packages/unicon-react/README.md: -------------------------------------------------------------------------------- 1 | # unicon-react 2 | 3 | Universal SVG rendering for React ✨ 4 | 5 | ### Install 6 | 7 | ``` 8 | yarn add unicon-react 9 | ``` 10 | 11 | ``` 12 | npm install unicon-react 13 | ``` 14 | 15 | ### Usage 16 | 17 | ```jsx 18 | import Graphic from 'unicon-react' 19 | import { Archive } from './icons' 20 | export default () => 21 | ``` 22 | 23 | ### Props 24 | 25 | #### source `(JSON fragment)` 26 | 27 | Accepts a JSON fragment produced by the [`unicon-cli`](../unicon-cli) tool. 28 | 29 | #### scale `(number | 'auto')` 30 | 31 | Scales the width + height equally. If set to `auto`, it will set 32 | `preserveAspectRatio="xMinYMin meet"` and 33 | `internalProps.shapeRendering='crispEdges'` for responsive SVGs. 34 | 35 | #### children `(children) => children)` 36 | 37 | Accepts a function allowing you to manipulate child layers. 38 | -------------------------------------------------------------------------------- /packages/unicon-react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "unicon-react", 3 | "version": "0.0.4", 4 | "source": "lib/index.js", 5 | "react-native": "lib/react-native.js", 6 | "main": "dist/react-unicon.js", 7 | "umd:main": "dist/react-unicon.umd.js", 8 | "module": "dist/react-unicon.m.js", 9 | "license": "MIT", 10 | "files": [ 11 | "dist", 12 | "lib" 13 | ], 14 | "scripts": { 15 | "build": "babel src --out-dir lib --plugins @babel/plugin-proposal-object-rest-spread && microbundle", 16 | "prepublishOnly": "npm run build" 17 | }, 18 | "devDependencies": { 19 | "@babel/cli": "^7.11.6", 20 | "@babel/core": "^7.11.6", 21 | "@babel/plugin-proposal-object-rest-spread": "^7.11.0", 22 | "microbundle": "^0.12.3" 23 | }, 24 | "peerDependencies": { 25 | "react": ">0.13.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /packages/unicon-react/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { Children, createElement } from 'react' 2 | 3 | function renderChildren({ tag, props, children }) { 4 | return createElement( 5 | tag, 6 | props, 7 | children 8 | ? children.constructor === Array 9 | ? Children.toArray(children.map(renderChildren)) 10 | : children 11 | : null 12 | ) 13 | } 14 | 15 | function Graphic({ children, source, scale = 1, ...restProps }) { 16 | const internalProps = {} 17 | const childrenToRender = Children.toArray(source.children.map(renderChildren)) 18 | if (scale === 'auto') { 19 | internalProps.preserveAspectRatio = 'xMinYMin meet' 20 | internalProps.shapeRendering = 'crispEdges' 21 | } else { 22 | internalProps.width = source.width * scale 23 | internalProps.height = source.height * scale 24 | } 25 | return createElement( 26 | 'svg', 27 | { 28 | viewBox: `0 0 ${source.width} ${source.height}`, 29 | ...source.props, 30 | ...internalProps, 31 | ...restProps, 32 | }, 33 | typeof children === 'function' 34 | ? children(childrenToRender) 35 | : childrenToRender 36 | ) 37 | } 38 | 39 | export default Graphic 40 | -------------------------------------------------------------------------------- /packages/unicon-react/src/react-native.js: -------------------------------------------------------------------------------- 1 | import React, { Children, createElement } from 'react' 2 | import * as Svg from 'react-native-svg' 3 | 4 | function pascalcase(str) { 5 | return str 6 | .toLowerCase() 7 | .trim() 8 | .split(/[.\-_\s]/g) 9 | .reduce((str, word) => str + word[0].toUpperCase() + word.slice(1), '') 10 | } 11 | 12 | function renderChildren({ tag, props, children }) { 13 | const component = Svg[pascalcase(tag)] 14 | if (!component) { 15 | console.warn(`${pascalcase(tag)} is not supported right now.`) 16 | return null 17 | } 18 | if (!props.fill) { 19 | props.fill = 'none' 20 | } 21 | return createElement( 22 | component, 23 | props, 24 | children 25 | ? children.constructor === Array 26 | ? Children.toArray(children.map(renderChildren)) 27 | : children 28 | : null 29 | ) 30 | } 31 | 32 | function Graphic({ children, source, scale = 1, ...restProps }) { 33 | const internalProps = {} 34 | const childrenToRender = Children.toArray(source.children.map(renderChildren)) 35 | if (scale === 'auto') { 36 | internalProps.preserveAspectRatio = 'xMinYMin meet' 37 | internalProps.shapeRendering = 'crispEdges' 38 | } else { 39 | internalProps.width = source.width * scale 40 | internalProps.height = source.height * scale 41 | } 42 | return createElement( 43 | Svg.default, 44 | { 45 | viewBox: `0 0 ${source.width} ${source.height}`, 46 | ...source.props, 47 | ...internalProps, 48 | ...restProps, 49 | }, 50 | typeof children === 'function' 51 | ? children(childrenToRender) 52 | : childrenToRender 53 | ) 54 | } 55 | 56 | export default Graphic 57 | -------------------------------------------------------------------------------- /packages/unicon-transformer-json/README.md: -------------------------------------------------------------------------------- 1 | # unicon-transformer-json 2 | 3 | Uses [svgo](https://github.com/svg/svgo) to cleanup each svg, as well as 4 | [svgson](https://github.com/elrumordelaluz/svgson-next/) to produce a JSON 5 | fragment for each svg. 6 | 7 | ### Install 8 | 9 | ``` 10 | yarn add unicon-transformer-json --dev 11 | ``` 12 | 13 | ``` 14 | npm install unicon-transformer-json --save-dev 15 | ``` 16 | 17 | ### Usage 18 | 19 | ### unicon-cli 20 | 21 | When using with [unicon-cli](../unicon-cli) you can omit the 22 | `unicon-transformer` portion. 23 | 24 | ```json 25 | { 26 | "scripts": { 27 | "icons": "unicon figma 5XaqhenkjvPmJprGZMFw2ge --name icons --transformer json" 28 | } 29 | } 30 | ``` 31 | 32 | ### node 33 | 34 | ```js 35 | import { getSvgsFromFigma } from 'unicon' 36 | import svgToJson from 'unicon-transformer-json' 37 | 38 | getSvgsFromFigma('5XaqhenkjvPmJprGZMFw2ge', { 39 | transformSvg: svgToJson, 40 | }).then((svgs) => console.log(svgs)) 41 | ``` 42 | 43 | ### Example Output 44 | 45 | ```json 46 | { 47 | "tag": "path", 48 | "props": { 49 | "d": "M15.5 14h-.79l-.28-.27A6.471 6.471...", 50 | "fill": "rainbow" 51 | }, 52 | "children": ["..."] 53 | } 54 | ``` 55 | -------------------------------------------------------------------------------- /packages/unicon-transformer-json/index.js: -------------------------------------------------------------------------------- 1 | const svgo = require('svgo') 2 | const svgson = require('svgson-next').default 3 | 4 | function optimizeSvg(svg) { 5 | return new svgo({ 6 | multipass: true, 7 | }) 8 | .optimize(svg) 9 | .then(({ data }) => data) 10 | } 11 | 12 | function getSize(json) { 13 | if (json.props.viewBox) { 14 | const [, , width, height] = json.props.viewBox.split(' ') 15 | return { width, height } 16 | } else { 17 | const { width, height } = json.props 18 | return { width, height } 19 | } 20 | } 21 | 22 | async function transformSvg(svg) { 23 | const optimizedSvg = await optimizeSvg(svg) 24 | const json = await svgson(svg, { 25 | camelcase: true, 26 | transformNode: ({ attributes, children, name }) => ({ 27 | tag: name, 28 | props: attributes, 29 | ...(children && children.length > 0 30 | ? { 31 | children: 32 | children[0].type === 'text' ? children[0].value : children, 33 | } 34 | : {}), 35 | }), 36 | }) 37 | const { width, height } = getSize(json) 38 | return { 39 | width: parseInt(width, 10), 40 | height: parseInt(height, 10), 41 | children: json.children, 42 | } 43 | } 44 | 45 | module.exports = transformSvg 46 | -------------------------------------------------------------------------------- /packages/unicon-transformer-json/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "unicon-transformer-json", 3 | "version": "0.0.1", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "dependencies": { 7 | "svgo": "^1.3.2", 8 | "svgson-next": "4.3.0" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /packages/unicon/README.md: -------------------------------------------------------------------------------- 1 | # unicon 2 | 3 | A set of functions to source SVG data from _any_ design tool. 4 | 5 | ## Install 6 | 7 | ``` 8 | yarn add unicon 9 | ``` 10 | 11 | ``` 12 | npm install unicon 13 | ``` 14 | 15 | ## Exports 16 | 17 | ### Figma 18 | 19 | #### `setFigmaToken(authToken: String)` 20 | 21 | You must set a 22 | [personal access token](https://www.figma.com/developers/docs#auth-dev-token) in 23 | order to use the `getSvgsFromFigma` function below. 24 | 25 | #### `getSvgsFromFigma(figmaFileId: String, options: Object): Promise.resolve(svgs: Any)` 26 | 27 | ### Sketch 28 | 29 | #### `getSvgsFromSketch(pathToSketchFile: String, options: Object): Promise.resolve(svgs: Any)` 30 | 31 | ### Folder 32 | 33 | #### `getSvgsFromFolder(pathToFolderOfSvgs: String, options: Object): Promise.resolve(svgs: Any)` 34 | 35 | ## Shared Options 36 | 37 | Each function above accepts a second paramater for options. 38 | 39 | ### transformSvg `(svg: String) => svg: Any` 40 | 41 | Accepts a function that receives the raw SVG string. 42 | 43 | ### group 44 | 45 | Groups the data by pages when using Figma or Sketch and by sub-directory name 46 | when using a folder. 47 | -------------------------------------------------------------------------------- /packages/unicon/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./src') 2 | -------------------------------------------------------------------------------- /packages/unicon/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "unicon", 3 | "version": "0.2.1", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "dependencies": { 7 | "axios": "^0.20.0", 8 | "chokidar": "^3.4.2", 9 | "date-fns": "^2.16.1", 10 | "del": "^5.1.0", 11 | "exec-then": "^1.3.1", 12 | "figma-js": "^1.11.0", 13 | "make-dir": "^3.1.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/unicon/src/get-svgs-from-figma.js: -------------------------------------------------------------------------------- 1 | const Figma = require('figma-js') 2 | const { compareAsc } = require('date-fns') 3 | const { getSvgFromUrl } = require('./utils') 4 | 5 | const lastModified = {} 6 | let filterId = -1 7 | let client 8 | 9 | function setFigmaToken(token) { 10 | client = Figma.Client({ personalAccessToken: token }) 11 | } 12 | 13 | function checkIfFigmaFileModified(fileId, cb) { 14 | const previouslyModified = lastModified[fileId] 15 | client.file(fileId).then(({ data }) => { 16 | if ( 17 | !previouslyModified || 18 | compareAsc(data.lastModified, previouslyModified) 19 | ) { 20 | cb(data) 21 | lastModified[fileId] = data.lastModified 22 | } 23 | }) 24 | } 25 | 26 | function watchFigmaFile(fileId, cb, pollingInterval = 1000) { 27 | setInterval(() => { 28 | checkIfFigmaFileModified(fileId, cb) 29 | }, pollingInterval) 30 | } 31 | 32 | function replaceValue(_, start, middle, end) { 33 | return `${start}${filterId}_${middle}${end}` 34 | } 35 | 36 | function incrementFilterId(str) { 37 | filterId++ 38 | return str 39 | .replace(/(filter="url\(#)(.*)(\)")/g, replaceValue) 40 | .replace(/()/g, replaceValue) 41 | } 42 | 43 | function traverseLayers(children, layers = {}) { 44 | if (children) { 45 | children.forEach((child) => { 46 | if (child.type === 'COMPONENT') { 47 | layers[child.name] = child.id 48 | } else if (child.children) { 49 | layers = { ...layers, ...traverseLayers(child.children, layers) } 50 | } 51 | }) 52 | } 53 | return layers 54 | } 55 | 56 | function getSvgsFromFigma( 57 | fileId, 58 | { page: pageToUse = false, group = false, transformSvg = (svg) => svg } = {} 59 | ) { 60 | if (!client) { 61 | throw new Error( 62 | 'You must set a Figma token before using this function. Please see the docs for setFigmaToken usage.' 63 | ) 64 | } 65 | 66 | return client.file(fileId).then(({ data }) => { 67 | const pages = data.document.children.reduce((collection, page) => { 68 | if (!pageToUse || page.name === pageToUse) { 69 | collection[page.name] = traverseLayers(page.children) 70 | } 71 | return collection 72 | }, {}) 73 | const componentIds = Object.keys(pages).reduce((ids, key) => { 74 | const components = pages[key] 75 | return [...ids, ...Object.keys(components).map((key) => components[key])] 76 | }, []) 77 | if (componentIds.length > 0) { 78 | console.log('Fetching components... 🌀') 79 | return client 80 | .fileImages(fileId, { 81 | ids: componentIds, 82 | format: 'svg', 83 | svg_include_id: true, 84 | }) 85 | .then(({ data: { images } }) => { 86 | console.log('Successfully fetched components ✅') 87 | console.log('Fetching svgs... 🌀') 88 | return Promise.all( 89 | componentIds.map((key) => images[key]).map(getSvgFromUrl) 90 | ) 91 | }) 92 | .then((svgs) => 93 | Promise.all(svgs.map((svg) => transformSvg(incrementFilterId(svg)))) 94 | ) 95 | .then((svgs) => { 96 | console.log('Successfully fetched svgs ✅') 97 | if (group) { 98 | let startIndex = 0 99 | return Object.keys(pages).reduce((pageSvgs, key) => { 100 | const components = pages[key] 101 | const componentKeys = Object.keys(components) 102 | const endIndex = startIndex + componentKeys.length 103 | pageSvgs[key] = svgs 104 | .slice(startIndex, endIndex) 105 | .reduce((collection, svg, index) => { 106 | const name = componentKeys[index] 107 | collection[name] = svg 108 | return collection 109 | }, {}) 110 | startIndex = endIndex 111 | return pageSvgs 112 | }, {}) 113 | } else { 114 | return Object.keys(pages) 115 | .reduce((keys, key) => [...keys, ...Object.keys(pages[key])], []) 116 | .reduce((collection, key, index) => { 117 | collection[key] = svgs[index] 118 | return collection 119 | }, {}) 120 | } 121 | }) 122 | } else { 123 | console.log('No components found 📭') 124 | return null 125 | } 126 | }) 127 | } 128 | 129 | module.exports = { 130 | getSvgsFromFigma, 131 | setFigmaToken, 132 | watchFigmaFile, 133 | } 134 | -------------------------------------------------------------------------------- /packages/unicon/src/get-svgs-from-folder.js: -------------------------------------------------------------------------------- 1 | const { lstatSync, readdirSync, readFileSync } = require('fs') 2 | const { join, basename } = require('path') 3 | const { watch } = require('./utils') 4 | 5 | const isDirectory = (source) => lstatSync(source).isDirectory() 6 | const getDirectories = (source) => 7 | readdirSync(source) 8 | .map((name) => join(source, name)) 9 | .filter(isDirectory) 10 | 11 | function watchFolder(source, cb) { 12 | return watch(source + '**/*.svg', cb) 13 | } 14 | 15 | async function getSvgsFromDirectory(path, transformSvg) { 16 | const files = readdirSync(path) 17 | const svgs = await Promise.all( 18 | files.map((name) => 19 | transformSvg(readFileSync(`${path}/${name}`).toString('utf8')) 20 | ) 21 | ) 22 | return files.reduce((collection, file, index) => { 23 | const name = file.replace('.svg', '') 24 | collection[name] = svgs[index] 25 | return collection 26 | }, {}) 27 | } 28 | 29 | async function getSvgsFromFolder( 30 | path, 31 | { group = false, transformSvg = (svg) => svg } = {} 32 | ) { 33 | if (group) { 34 | const directories = getDirectories(path) 35 | const svgs = await Promise.all( 36 | directories.map((directory) => 37 | getSvgsFromDirectory(directory, transformSvg) 38 | ) 39 | ) 40 | return directories.reduce((collection, directory, index) => { 41 | collection[basename(directory)] = svgs[index] 42 | return collection 43 | }, {}) 44 | } else { 45 | return getSvgsFromDirectory(path, transformSvg) 46 | } 47 | } 48 | 49 | module.exports = { 50 | getSvgsFromFolder, 51 | watchFolder, 52 | } 53 | -------------------------------------------------------------------------------- /packages/unicon/src/get-svgs-from-sketch.js: -------------------------------------------------------------------------------- 1 | const exec = require('exec-then') 2 | const makeDirectory = require('make-dir') 3 | const deleteDirectory = require('del') 4 | const { getSvgsFromFolder } = require('./get-svgs-from-folder') 5 | const { watch } = require('./utils') 6 | 7 | function SketchTool(...args) { 8 | return exec([ 9 | `/Applications/Sketch.app/Contents/Resources/sketchtool/bin/sketchtool`, 10 | ...args, 11 | ]) 12 | } 13 | 14 | function watchSketchFile(source, cb) { 15 | return watch(source, cb) 16 | } 17 | 18 | async function getSvgsFromSketch(path, { group, transformSvg } = {}) { 19 | const temporaryDirectory = await makeDirectory('./.svgs') 20 | if (group) { 21 | const pages = await SketchTool(`dump ${path}`).then(({ stdout }) => 22 | JSON.parse(stdout).pages.map((page) => ({ 23 | name: page.name, 24 | layers: page.layers 25 | .filter((layer) => layer[''] === 'MSArtboardGroup') 26 | .map((layer) => layer.objectID), 27 | })) 28 | ) 29 | await Promise.all( 30 | pages.map(async (page) => { 31 | const subDirectory = await makeDirectory(`./.svgs/${page.name}`) 32 | return SketchTool( 33 | `export artboards ${path}`, 34 | `--items=${page.layers.join(',')}`, 35 | `--output=${subDirectory}`, 36 | `--formats=svg` 37 | ) 38 | }) 39 | ) 40 | } else { 41 | await SketchTool( 42 | `export artboards ${path}`, 43 | `--output=${temporaryDirectory}`, 44 | `--formats=svg` 45 | ) 46 | } 47 | return getSvgsFromFolder(temporaryDirectory, { 48 | group, 49 | transformSvg, 50 | }).then((svgs) => { 51 | deleteDirectory(temporaryDirectory) 52 | return svgs 53 | }) 54 | } 55 | 56 | module.exports = { 57 | getSvgsFromSketch, 58 | watchSketchFile, 59 | } 60 | -------------------------------------------------------------------------------- /packages/unicon/src/index.js: -------------------------------------------------------------------------------- 1 | const { 2 | setFigmaToken, 3 | getSvgsFromFigma, 4 | watchFigmaFile, 5 | } = require('./get-svgs-from-figma') 6 | const { getSvgsFromSketch, watchSketchFile } = require('./get-svgs-from-sketch') 7 | const { getSvgsFromFolder, watchFolder } = require('./get-svgs-from-folder') 8 | 9 | module.exports = { 10 | setFigmaToken, 11 | getSvgsFromFigma, 12 | getSvgsFromSketch, 13 | getSvgsFromFolder, 14 | watchFigmaFile, 15 | watchSketchFile, 16 | watchFolder, 17 | } 18 | -------------------------------------------------------------------------------- /packages/unicon/src/utils.js: -------------------------------------------------------------------------------- 1 | const axios = require('axios') 2 | const chokidar = require('chokidar') 3 | 4 | function getSvgFromUrl(url) { 5 | return axios 6 | .get(url, { 7 | headers: { 8 | 'Content-Type': 'images/svg+xml', 9 | }, 10 | }) 11 | .then((response) => response.data) 12 | } 13 | 14 | function watch(source, cb) { 15 | const watcher = chokidar.watch(source, { 16 | persistent: true, 17 | }) 18 | watcher.on('change', (path) => { 19 | console.log('file changed') 20 | cb() 21 | }) 22 | } 23 | 24 | module.exports = { 25 | getSvgFromUrl, 26 | watch, 27 | } 28 | --------------------------------------------------------------------------------