groot/automatisch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1484 from automatisch/AUT-510

Browse Source 
feat(google-tasks): add google tasks integration
This commit is contained in:
Ali BARIN
2024-05-06 18:23:28 +02:00
committed by GitHub
parent 64ef655abb e398bb84d4
commit 033b15a158
28 changed files with 787 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
packages/backend/src/apps/google-tasks/actions/create-task-list/index.js Normal file
View File

@@ -0,0 +1,31 @@
import defineAction from '../../../../helpers/define-action.js';
export default defineAction({
name: 'Create task list',
key: 'createTaskList',
description: 'Creates a new task list.',
arguments: [
{
label: 'List Title',
key: 'listTitle',
type: 'string',
required: true,
description: '',
variables: true,
},
],
async run($) {
const listTitle = $.step.parameters.listTitle;
const body = {
title: listTitle,
};
const { data } = await $.http.post('/tasks/v1/users/@me/lists', body);
$.setActionItem({
raw: data,
});
},
});

70
packages/backend/src/apps/google-tasks/actions/create-task/index.js Normal file
View File

@@ -0,0 +1,70 @@
import defineAction from '../../../../helpers/define-action.js';
export default defineAction({
name: 'Create task',
key: 'createTask',
description: 'Creates a new task.',
arguments: [
{
label: 'Task List',
key: 'taskListId',
type: 'dropdown',
required: true,
description: '',
variables: true,
source: {
type: 'query',
name: 'getDynamicData',
arguments: [
{
name: 'key',
value: 'listTaskLists',
},
],
},
},
{
label: 'Title',
key: 'title',
type: 'string',
required: true,
description: '',
variables: true,
},
{
label: 'Notes',
key: 'notes',
type: 'string',
required: false,
description: '',
variables: true,
},
{
label: 'Due Date',
key: 'due',
type: 'string',
required: false,
description: 'RFC 3339 timestamp.',
variables: true,
},
],
async run($) {
const { taskListId, title, notes, due } = $.step.parameters;
const body = {
title,
notes,
due,
};
const { data } = await $.http.post(
`/tasks/v1/lists/${taskListId}/tasks`,
body
);
$.setActionItem({
raw: data,
});
},
});

50
packages/backend/src/apps/google-tasks/actions/find-task/index.js Normal file
View File

@@ -0,0 +1,50 @@
import defineAction from '../../../../helpers/define-action.js';
export default defineAction({
name: 'Find task',
key: 'findTask',
description: 'Looking for an incomplete task.',
arguments: [
{
label: 'Task List',
key: 'taskListId',
type: 'dropdown',
required: true,
description: 'The list to be searched.',
variables: true,
source: {
type: 'query',
name: 'getDynamicData',
arguments: [
{
name: 'key',
value: 'listTaskLists',
},
],
},
},
{
label: 'Title',
key: 'title',
type: 'string',
required: true,
description: '',
variables: true,
},
],
async run($) {
const taskListId = $.step.parameters.taskListId;
const title = $.step.parameters.title;
const { data } = await $.http.get(`/tasks/v1/lists/${taskListId}/tasks`);
const filteredTask = data.items?.filter((task) =>
task.title.includes(title)
);
$.setActionItem({
raw: filteredTask[0],
});
},
});

6
packages/backend/src/apps/google-tasks/actions/index.js Normal file
View File

@@ -0,0 +1,6 @@
import createTask from './create-task/index.js';
import createTaskList from './create-task-list/index.js';
import findTask from './find-task/index.js';
import updateTask from './update-task/index.js';
export default [createTask, createTaskList, findTask, updateTask];

108
packages/backend/src/apps/google-tasks/actions/update-task/index.js Normal file
View File

@@ -0,0 +1,108 @@
import defineAction from '../../../../helpers/define-action.js';
export default defineAction({
name: 'Update task',
key: 'updateTask',
description: 'Updates an existing task.',
arguments: [
{
label: 'Task List',
key: 'taskListId',
type: 'dropdown',
required: true,
description: '',
variables: true,
source: {
type: 'query',
name: 'getDynamicData',
arguments: [
{
name: 'key',
value: 'listTaskLists',
},
],
},
},
{
label: 'Task',
key: 'taskId',
type: 'dropdown',
required: true,
description: 'Ensure that you choose a list before proceeding.',
variables: true,
dependsOn: ['parameters.taskListId'],
source: {
type: 'query',
name: 'getDynamicData',
arguments: [
{
name: 'key',
value: 'listTasks',
},
{
name: 'parameters.taskListId',
value: '{parameters.taskListId}',
},
],
},
},
{
label: 'Title',
key: 'title',
type: 'string',
required: false,
description: 'Provide a new title for the revised task.',
variables: true,
},
{
label: 'Status',
key: 'status',
type: 'dropdown',
required: false,
description:
'Specify the status of the updated task. If you opt for a custom value, enter either "needsAttention" or "completed."',
variables: true,
options: [
{ label: 'Incomplete', value: 'needsAction' },
{ label: 'Complete', value: 'completed' },
],
},
{
label: 'Notes',
key: 'notes',
type: 'string',
required: false,
description: 'Provide a note for the revised task.',
variables: true,
},
{
label: 'Due Date',
key: 'due',
type: 'string',
required: false,
description:
'Specify the deadline for the task (as a RFC 3339 timestamp).',
variables: true,
},
],
async run($) {
const { taskListId, taskId, title, status, notes, due } = $.step.parameters;
const body = {
title,
status,
notes,
due,
};
const { data } = await $.http.patch(
`/tasks/v1/lists/${taskListId}/tasks/${taskId}`,
body
);
$.setActionItem({
raw: data,
});
},
});

16
packages/backend/src/apps/google-tasks/assets/favicon.svg Normal file
View File

@@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1"
id="svg8849" inkscape:version="1.1 (c68e22c387, 2021-05-23)" sodipodi:docname="google tasks.svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="527.1px" height="500px"
viewBox="0 0 527.1 500" enable-background="new 0 0 527.1 500" xml:space="preserve">
<sodipodi:namedview bordercolor="#eeeeee" borderopacity="1" id="namedview8851" inkscape:bbox-nodes="true" inkscape:bbox-paths="true" inkscape:current-layer="layer1" inkscape:cx="280.62992" inkscape:cy="277.14384" inkscape:document-units="mm" inkscape:object-paths="true" inkscape:pagecheckerboard="0" inkscape:pageopacity="0" inkscape:pageshadow="0" inkscape:snap-bbox="true" inkscape:snap-bbox-edge-midpoints="true" inkscape:snap-bbox-midpoints="true" inkscape:snap-center="true" inkscape:snap-global="true" inkscape:snap-intersection-paths="true" inkscape:snap-midpoints="true" inkscape:snap-object-midpoints="true" inkscape:snap-page="true" inkscape:snap-smooth-nodes="true" inkscape:snap-text-baseline="true" inkscape:window-height="1009" inkscape:window-maximized="1" inkscape:window-width="1920" inkscape:window-x="1912" inkscape:window-y="760" inkscape:zoom="1.4342733" pagecolor="#505050" showgrid="false" units="px">
</sodipodi:namedview>
<g>
<polygon fill="#0066DA" points="410.4,58.3 368.8,81.2 348.2,120.6 368.8,168.8 407.8,211 450,187.5 475.9,142.8 450,87.5 "/>
<path fill="#2684FC" d="M249.3,219.4l98.9-98.9c29.1,22.1,50.5,53.8,59.6,90.4L272.1,346.7c-12.2,12.2-32,12.2-44.2,0l-91.5-91.5
c-9.8-9.8-9.8-25.6,0-35.3l39-39c9.8-9.8,25.6-9.8,35.3,0L249.3,219.4z M519.8,63.6l-39.7-39.7c-9.7-9.7-25.6-9.7-35.3,0
l-34.4,34.4c27.5,23,49.9,51.8,65.5,84.5l43.9-43.9C529.6,89.2,529.6,73.3,519.8,63.6z M412.5,250c0,89.8-72.8,162.5-162.5,162.5
S87.5,339.8,87.5,250S160.2,87.5,250,87.5c36.9,0,70.9,12.3,98.2,33.1l62.2-62.2C367,21.9,311.1,0,250,0C111.9,0,0,111.9,0,250
s111.9,250,250,250s250-111.9,250-250c0-38.3-8.7-74.7-24.1-107.2L407.8,211C410.8,223.5,412.5,236.6,412.5,250z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

23
packages/backend/src/apps/google-tasks/auth/generate-auth-url.js Normal file
View File

@@ -0,0 +1,23 @@
import { URLSearchParams } from 'url';
import authScope from '../common/auth-scope.js';
export default async function generateAuthUrl($) {
const oauthRedirectUrlField = $.app.auth.fields.find(
(field) => field.key == 'oAuthRedirectUrl'
);
const redirectUri = oauthRedirectUrlField.value;
const searchParams = new URLSearchParams({
client_id: $.auth.data.clientId,
redirect_uri: redirectUri,
prompt: 'select_account',
scope: authScope.join(' '),
response_type: 'code',
access_type: 'offline',
});
const url = `https://accounts.google.com/o/oauth2/v2/auth?${searchParams.toString()}`;
await $.auth.set({
url,
});
}

48
packages/backend/src/apps/google-tasks/auth/index.js Normal file
View File

@@ -0,0 +1,48 @@
import generateAuthUrl from './generate-auth-url.js';
import verifyCredentials from './verify-credentials.js';
import refreshToken from './refresh-token.js';
import isStillVerified from './is-still-verified.js';
export default {
fields: [
{
key: 'oAuthRedirectUrl',
label: 'OAuth Redirect URL',
type: 'string',
required: true,
readOnly: true,
value: '{WEB_APP_URL}/app/google-tasks/connections/add',
placeholder: null,
description:
'When asked to input a redirect URL in Google Cloud, enter the URL above.',
clickToCopy: true,
},
{
key: 'clientId',
label: 'Client ID',
type: 'string',
required: true,
readOnly: false,
value: null,
placeholder: null,
description: null,
clickToCopy: false,
},
{
key: 'clientSecret',
label: 'Client Secret',
type: 'string',
required: true,
readOnly: false,
value: null,
placeholder: null,
description: null,
clickToCopy: false,
},
],
generateAuthUrl,
verifyCredentials,
isStillVerified,
refreshToken,
};

8
packages/backend/src/apps/google-tasks/auth/is-still-verified.js Normal file
View File

@@ -0,0 +1,8 @@
import getCurrentUser from '../common/get-current-user.js';
const isStillVerified = async ($) => {
const currentUser = await getCurrentUser($);
return !!currentUser.resourceName;
};
export default isStillVerified;

25
packages/backend/src/apps/google-tasks/auth/refresh-token.js Normal file
View File

@@ -0,0 +1,25 @@
import { URLSearchParams } from 'node:url';
import authScope from '../common/auth-scope.js';
const refreshToken = async ($) => {
const params = new URLSearchParams({
client_id: $.auth.data.clientId,
client_secret: $.auth.data.clientSecret,
grant_type: 'refresh_token',
refresh_token: $.auth.data.refreshToken,
});
const { data } = await $.http.post(
'https://oauth2.googleapis.com/token',
params.toString()
);
await $.auth.set({
accessToken: data.access_token,
expiresIn: data.expires_in,
scope: authScope.join(' '),
tokenType: data.token_type,
});
};
export default refreshToken;

42
packages/backend/src/apps/google-tasks/auth/verify-credentials.js Normal file
View File

@@ -0,0 +1,42 @@
import getCurrentUser from '../common/get-current-user.js';
const verifyCredentials = async ($) => {
const oauthRedirectUrlField = $.app.auth.fields.find(
(field) => field.key == 'oAuthRedirectUrl'
);
const redirectUri = oauthRedirectUrlField.value;
const { data } = await $.http.post(`https://oauth2.googleapis.com/token`, {
client_id: $.auth.data.clientId,
client_secret: $.auth.data.clientSecret,
code: $.auth.data.code,
grant_type: 'authorization_code',
redirect_uri: redirectUri,
});
await $.auth.set({
accessToken: data.access_token,
tokenType: data.token_type,
});
const currentUser = await getCurrentUser($);
const { displayName } = currentUser.names.find(
(name) => name.metadata.primary
);
const { value: email } = currentUser.emailAddresses.find(
(emailAddress) => emailAddress.metadata.primary
);
await $.auth.set({
clientId: $.auth.data.clientId,
clientSecret: $.auth.data.clientSecret,
scope: $.auth.data.scope,
idToken: data.id_token,
expiresIn: data.expires_in,
refreshToken: data.refresh_token,
resourceName: currentUser.resourceName,
screenName: `${displayName} - ${email}`,
});
};
export default verifyCredentials;

9
packages/backend/src/apps/google-tasks/common/add-auth-header.js Normal file
View File

@@ -0,0 +1,9 @@
const addAuthHeader = ($, requestConfig) => {
if ($.auth.data?.accessToken) {
requestConfig.headers.Authorization = `${$.auth.data.tokenType} ${$.auth.data.accessToken}`;
}
return requestConfig;
};
export default addAuthHeader;

7
packages/backend/src/apps/google-tasks/common/auth-scope.js Normal file
View File

@@ -0,0 +1,7 @@
const authScope = [
'https://www.googleapis.com/auth/tasks',
'https://www.googleapis.com/auth/userinfo.email',
'https://www.googleapis.com/auth/userinfo.profile',
];
export default authScope;

8
packages/backend/src/apps/google-tasks/common/get-current-user.js Normal file
View File

@@ -0,0 +1,8 @@
const getCurrentUser = async ($) => {
const { data: currentUser } = await $.http.get(
'https://people.googleapis.com/v1/people/me?personFields=names,emailAddresses'
);
return currentUser;
};
export default getCurrentUser;

4
packages/backend/src/apps/google-tasks/dynamic-data/index.js Normal file
View File

@@ -0,0 +1,4 @@
import listTaskLists from './list-task-lists/index.js';
import listTasks from './list-tasks/index.js';
export default [listTaskLists, listTasks];

33
packages/backend/src/apps/google-tasks/dynamic-data/list-task-lists/index.js Normal file
View File

@@ -0,0 +1,33 @@
export default {
name: 'List task lists',
key: 'listTaskLists',
async run($) {
const taskLists = {
data: [],
};
const params = {
maxResults: 100,
pageToken: undefined,
};
do {
const { data } = await $.http.get('/tasks/v1/users/@me/lists', {
params,
});
params.pageToken = data.nextPageToken;
if (data.items) {
for (const taskList of data.items) {
taskLists.data.push({
value: taskList.id,
name: taskList.title,
});
}
}
} while (params.pageToken);
return taskLists;
},
};

40
packages/backend/src/apps/google-tasks/dynamic-data/list-tasks/index.js Normal file
View File

@@ -0,0 +1,40 @@
export default {
name: 'List tasks',
key: 'listTasks',
async run($) {
const tasks = {
data: [],
};
const taskListId = $.step.parameters.taskListId;
const params = {
maxResults: 100,
pageToken: undefined,
};
if (!taskListId) {
return tasks;
}
do {
const { data } = await $.http.get(`/tasks/v1/lists/${taskListId}/tasks`, {
params,
});
params.pageToken = data.nextPageToken;
if (data.items) {
for (const task of data.items) {
if (task.title !== '') {
tasks.data.push({
value: task.id,
name: task.title,
});
}
}
}
} while (params.pageToken);
return tasks;
},
};

22
packages/backend/src/apps/google-tasks/index.js Normal file
View File

@@ -0,0 +1,22 @@
import defineApp from '../../helpers/define-app.js';
import addAuthHeader from './common/add-auth-header.js';
import auth from './auth/index.js';
import actions from './actions/index.js';
import triggers from './triggers/index.js';
import dynamicData from './dynamic-data/index.js';
export default defineApp({
name: 'Google Tasks',
key: 'google-tasks',
baseUrl: 'https://calendar.google.com/calendar/u/0/r/tasks',
apiBaseUrl: 'https://tasks.googleapis.com',
iconUrl: '{BASE_URL}/apps/google-tasks/assets/favicon.svg',
authDocUrl: '{DOCS_URL}/apps/google-tasks/connection',
primaryColor: '0066DA',
supportsConnections: true,
beforeRequest: [addAuthHeader],
auth,
actions,
dynamicData,
triggers,
});

5
packages/backend/src/apps/google-tasks/triggers/index.js Normal file
View File

@@ -0,0 +1,5 @@
import newCompletedTasks from './new-completed-tasks/index.js';
import newTaskLists from './new-task-lists/index.js';
import newTasks from './new-tasks/index.js';
export default [newCompletedTasks, newTaskLists, newTasks];

59
packages/backend/src/apps/google-tasks/triggers/new-completed-tasks/index.js Normal file
View File

@@ -0,0 +1,59 @@
import defineTrigger from '../../../../helpers/define-trigger.js';
export default defineTrigger({
name: 'New completed tasks',
key: 'newCompletedTasks',
pollInterval: 15,
description: 'Triggers when a task is finished within a specified task list.',
arguments: [
{
label: 'Task List',
key: 'taskListId',
type: 'dropdown',
required: true,
description: '',
variables: true,
source: {
type: 'query',
name: 'getDynamicData',
arguments: [
{
name: 'key',
value: 'listTaskLists',
},
],
},
},
],
async run($) {
const taskListId = $.step.parameters.taskListId;
const params = {
maxResults: 100,
showCompleted: true,
showHidden: true,
pageToken: undefined,
};
do {
const { data } = await $.http.get(`/tasks/v1/lists/${taskListId}/tasks`, {
params,
});
params.pageToken = data.nextPageToken;
if (data.items?.length) {
for (const task of data.items) {
if (task.status === 'completed') {
$.pushTriggerItem({
raw: task,
meta: {
internalId: task.id,
},
});
}
}
}
} while (params.pageToken);
},
});

31
packages/backend/src/apps/google-tasks/triggers/new-task-lists/index.js Normal file
View File

@@ -0,0 +1,31 @@
import defineTrigger from '../../../../helpers/define-trigger.js';
export default defineTrigger({
name: 'New task lists',
key: 'newTaskLists',
pollInterval: 15,
description: 'Triggers when a new task list is created.',
async run($) {
const params = {
maxResults: 100,
pageToken: undefined,
};
do {
const { data } = await $.http.get('/tasks/v1/users/@me/lists');
params.pageToken = data.nextPageToken;
if (data.items?.length) {
for (const taskList of data.items.reverse()) {
$.pushTriggerItem({
raw: taskList,
meta: {
internalId: taskList.id,
},
});
}
}
} while (params.pageToken);
},
});

53
packages/backend/src/apps/google-tasks/triggers/new-tasks/index.js Normal file
View File

@@ -0,0 +1,53 @@
import defineTrigger from '../../../../helpers/define-trigger.js';
export default defineTrigger({
name: 'New tasks',
key: 'newTasks',
pollInterval: 15,
description: 'Triggers when a new task is created.',
arguments: [
{
label: 'Task List',
key: 'taskListId',
type: 'dropdown',
required: true,
description: '',
variables: true,
source: {
type: 'query',
name: 'getDynamicData',
arguments: [
{
name: 'key',
value: 'listTaskLists',
},
],
},
},
],
async run($) {
const taskListId = $.step.parameters.taskListId;
const params = {
maxResults: 100,
pageToken: undefined,
};
do {
const { data } = await $.http.get(`/tasks/v1/lists/${taskListId}/tasks`);
params.pageToken = data.nextPageToken;
if (data.items?.length) {
for (const task of data.items) {
$.pushTriggerItem({
raw: task,
meta: {
internalId: task.id,
},
});
}
}
} while (params.pageToken);
},
});

10
packages/docs/pages/.vitepress/config.js
View File

@@ -187,6 +187,16 @@ export default defineConfig({
{ text: 'Connection', link: '/apps/google-sheets/connection' },
],
},
{
text: 'Google Tasks',
collapsible: true,
collapsed: true,
items: [
{ text: 'Triggers', link: '/apps/google-tasks/triggers' },
{ text: 'Actions', link: '/apps/google-tasks/actions' },
{ text: 'Connection', link: '/apps/google-tasks/connection' },
],
},
{
text: 'HTTP Request',
collapsible: true,

18
packages/docs/pages/apps/google-tasks/actions.md Normal file
View File

@@ -0,0 +1,18 @@
---
favicon: /favicons/google-tasks.svg
items:
- name: Create task
desc: Creates a new task.
- name: Create task list
desc: Creates a new task list.
- name: Find task
desc: Looking for an incomplete task.
- name: Update task
desc: Updates an existing task.
---
<script setup>
import CustomListing from '../../components/CustomListing.vue'
</script>
<CustomListing />

28
packages/docs/pages/apps/google-tasks/connection.md Normal file
View File

@@ -0,0 +1,28 @@
# Google Tasks
:::info
This page explains the steps you need to follow to set up the Google Tasks
connection in Automatisch. If any of the steps are outdated, please let us know!
:::
1. Go to the [Google Cloud Console](https://console.cloud.google.com) to create a project.
2. Click on the project drop-down menu at the top of the page, and click on the **New Project** button.
3. Enter a name for your project and click on the **Create** button.
4. Go to [API Library](https://console.cloud.google.com/apis/library) in Google Cloud console.
5. Search for **Google Tasks API** in the search bar and click on it.
6. Click on the **Enable** button to enable the API.
7. Repeat steps 5 and 6 for the **People API**.
8. Go to [OAuth consent screen](https://console.cloud.google.com/apis/credentials/consent) in Google Cloud console.
9. Select **External** here for starting your app in testing mode at first. Click on the **Create** button.
10. Fill **App Name**, **User Support Email**, and **Developer Contact Information**. Click on the **Save and Continue** button.
11. Skip adding or removing scopes and click on the **Save and Continue** button.
12. Click on the **Add Users** button and add a test email because only test users can access the app while publishing status is set to "Testing".
13. Click on the **Save and Continue** button and now you have configured the consent screen.
14. Go to [Credentials](https://console.cloud.google.com/apis/credentials) in Google Cloud console.
15. Click on the **Create Credentials** button and select the **OAuth client ID** option.
16. Select the application type as **Web application** and fill the **Name** field.
17. Copy **OAuth Redirect URL** from Automatisch to **Authorized redirect URIs** field, and click on the **Create** button.
18. Copy the **Your Client ID** value from the following popup to the `Client ID` field on Automatisch.
19. Copy the **Your Client Secret** value from the following popup to the `Client Secret` field on Automatisch.
20. Click **Submit** button on Automatisch.
21. Congrats! Start using your new Google Tasks connection within the flows.

16
packages/docs/pages/apps/google-tasks/triggers.md Normal file
View File

@@ -0,0 +1,16 @@
---
favicon: /favicons/google-tasks.svg
items:
- name: New completed tasks
desc: Triggers when a task is finished within a specified task list.
- name: New task lists
desc: Triggers when a new task list is created.
- name: New tasks
desc: Triggers when a new task is created.
---
<script setup>
import CustomListing from '../../components/CustomListing.vue'
</script>
<CustomListing />

1
packages/docs/pages/guide/available-apps.md
View File

@@ -19,6 +19,7 @@ The following integrations are currently supported by Automatisch.
- [Google Drive](/apps/google-drive/triggers)
- [Google Forms](/apps/google-forms/triggers)
- [Google Sheets](/apps/google-sheets/triggers)
- [Google Tasks](/apps/google-tasks/actions)
- [HTTP Request](/apps/http-request/actions)
- [HubSpot](/apps/hubspot/actions)
- [Invoice Ninja](/apps/invoice-ninja/triggers)

16
packages/docs/pages/public/favicons/google-tasks.svg Normal file
View File

@@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1"
id="svg8849" inkscape:version="1.1 (c68e22c387, 2021-05-23)" sodipodi:docname="google tasks.svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="527.1px" height="500px"
viewBox="0 0 527.1 500" enable-background="new 0 0 527.1 500" xml:space="preserve">
<sodipodi:namedview bordercolor="#eeeeee" borderopacity="1" id="namedview8851" inkscape:bbox-nodes="true" inkscape:bbox-paths="true" inkscape:current-layer="layer1" inkscape:cx="280.62992" inkscape:cy="277.14384" inkscape:document-units="mm" inkscape:object-paths="true" inkscape:pagecheckerboard="0" inkscape:pageopacity="0" inkscape:pageshadow="0" inkscape:snap-bbox="true" inkscape:snap-bbox-edge-midpoints="true" inkscape:snap-bbox-midpoints="true" inkscape:snap-center="true" inkscape:snap-global="true" inkscape:snap-intersection-paths="true" inkscape:snap-midpoints="true" inkscape:snap-object-midpoints="true" inkscape:snap-page="true" inkscape:snap-smooth-nodes="true" inkscape:snap-text-baseline="true" inkscape:window-height="1009" inkscape:window-maximized="1" inkscape:window-width="1920" inkscape:window-x="1912" inkscape:window-y="760" inkscape:zoom="1.4342733" pagecolor="#505050" showgrid="false" units="px">
</sodipodi:namedview>
<g>
<polygon fill="#0066DA" points="410.4,58.3 368.8,81.2 348.2,120.6 368.8,168.8 407.8,211 450,187.5 475.9,142.8 450,87.5 "/>
<path fill="#2684FC" d="M249.3,219.4l98.9-98.9c29.1,22.1,50.5,53.8,59.6,90.4L272.1,346.7c-12.2,12.2-32,12.2-44.2,0l-91.5-91.5
c-9.8-9.8-9.8-25.6,0-35.3l39-39c9.8-9.8,25.6-9.8,35.3,0L249.3,219.4z M519.8,63.6l-39.7-39.7c-9.7-9.7-25.6-9.7-35.3,0
l-34.4,34.4c27.5,23,49.9,51.8,65.5,84.5l43.9-43.9C529.6,89.2,529.6,73.3,519.8,63.6z M412.5,250c0,89.8-72.8,162.5-162.5,162.5
S87.5,339.8,87.5,250S160.2,87.5,250,87.5c36.9,0,70.9,12.3,98.2,33.1l62.2-62.2C367,21.9,311.1,0,250,0C111.9,0,0,111.9,0,250
s111.9,250,250,250s250-111.9,250-250c0-38.3-8.7-74.7-24.1-107.2L407.8,211C410.8,223.5,412.5,236.6,412.5,250z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB