antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2026-03-01 12:44:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

migrate more svgs from code to file, use hero icons where it seems applicable

Browse Source
This commit is contained in:
Ulf Gebhardt 2025-02-24 03:27:29 +01:00
parent 9e1a67aba4
commit 236d8c826b
Signed by: ulfgebhardt
GPG Key ID: DA6B843E748679C9
17 changed files with 106 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/Components/Map/Subcomponents/Controls/LocateControl.tsx
View File

@ -7,6 +7,9 @@
import { control } from 'leaflet'
import { useEffect, useRef, useState } from 'react'
import { useMap, useMapEvents } from 'react-leaflet'
import TargetSVG from '#assets/target.svg'
// eslint-disable-next-line import/no-unassigned-import
import 'leaflet.locatecontrol'
import 'leaflet.locatecontrol/dist/L.Control.Locate.css'
@ -56,15 +59,12 @@ export const LocateControl = () => {
{loading ? (
<span className='tw-loading tw-loading-spinner tw-loading-md tw-mt-1'></span>
) : (
<svg
fill={`${active ? '#fc8702' : 'currentColor'}`}
viewBox='0 0 32 32'
version='1.1'
xmlns='http://www.w3.org/2000/svg'
<img
src={TargetSVG}
alt='x'
className='tw-mt-1 tw-p-[1px]'
>
<path d='M30 14.75h-2.824c-0.608-5.219-4.707-9.318-9.874-9.921l-0.053-0.005v-2.824c0-0.69-0.56-1.25-1.25-1.25s-1.25 0.56-1.25 1.25v0 2.824c-5.219 0.608-9.318 4.707-9.921 9.874l-0.005 0.053h-2.824c-0.69 0-1.25 0.56-1.25 1.25s0.56 1.25 1.25 1.25v0h2.824c0.608 5.219 4.707 9.318 9.874 9.921l0.053 0.005v2.824c0 0.69 0.56 1.25 1.25 1.25s1.25-0.56 1.25-1.25v0-2.824c5.219-0.608 9.318-4.707 9.921-9.874l0.005-0.053h2.824c0.69 0 1.25-0.56 1.25-1.25s-0.56-1.25-1.25-1.25v0zM17.25 24.624v-2.624c0-0.69-0.56-1.25-1.25-1.25s-1.25 0.56-1.25 1.25v0 2.624c-3.821-0.57-6.803-3.553-7.368-7.326l-0.006-0.048h2.624c0.69 0 1.25-0.56 1.25-1.25s-0.56-1.25-1.25-1.25v0h-2.624c0.57-3.821 3.553-6.804 7.326-7.368l0.048-0.006v2.624c0 0.69 0.56 1.25 1.25 1.25s1.25-0.56 1.25-1.25v0-2.624c3.821 0.57 6.803 3.553 7.368 7.326l0.006 0.048h-2.624c-0.69 0-1.25 0.56-1.25 1.25s0.56 1.25 1.25 1.25v0h2.624c-0.571 3.821-3.553 6.803-7.326 7.368l-0.048 0.006z'></path>
</svg>
style={{ fill: `${active ? '#fc8702' : 'currentColor'}` }}
/>
)}
</div>
</div>

11
src/Components/Map/Subcomponents/Controls/QuestControl.tsx
View File

@ -1,3 +1,5 @@
import HandRaisedIcon from '@heroicons/react/24/outline/HandRaisedIcon'
import { useQuestsOpen, useSetQuestOpen } from '#components/Gaming/hooks/useQuests'
export function QuestControl() {
@ -17,14 +19,7 @@ export function QuestControl() {
className='tw-card-body hover:tw-bg-slate-300 tw-rounded-2xl tw-p-2 tw-h-10 tw-w-10 tw-transition-all tw-duration-300 hover:tw-cursor-pointer'
onClick={() => setQuestsOpen(true)}
>
<svg
xmlns='http://www.w3.org/2000/svg'
fill='currentColor'
stroke='currentColor'
viewBox='0 0 448 512'
>
<path d='M192 0c17.7 0 32 14.3 32 32V144H160V32c0-17.7 14.3-32 32-32zM64 64c0-17.7 14.3-32 32-32s32 14.3 32 32v80H64V64zm192 0c0-17.7 14.3-32 32-32s32 14.3 32 32v96c0 17.7-14.3 32-32 32s-32-14.3-32-32V64zm96 64c0-17.7 14.3-32 32-32s32 14.3 32 32v64c0 17.7-14.3 32-32 32s-32-14.3-32-32V128zm-96 88l0-.6c9.4 5.4 20.3 8.6 32 8.6c13.2 0 25.4-4 35.6-10.8c8.7 24.9 32.5 42.8 60.4 42.8c11.7 0 22.6-3.1 32-8.6V256c0 52.3-25.1 98.8-64 128v96c0 17.7-14.3 32-32 32H160c-17.7 0-32-14.3-32-32V401.6c-17.3-7.9-33.2-18.8-46.9-32.5L69.5 357.5C45.5 333.5 32 300.9 32 267V240c0-35.3 28.7-64 64-64h88c22.1 0 40 17.9 40 40s-17.9 40-40 40H128c-8.8 0-16 7.2-16 16s7.2 16 16 16h56c39.8 0 72-32.2 72-72z' />
</svg>
<HandRaisedIcon />
</div>
</div>
)}

12
src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
View File

@ -15,6 +15,7 @@ import TrashIcon from '@heroicons/react/24/outline/TrashIcon'
import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import TargetDotSVG from '#assets/targetDot.svg'
import { useAppState } from '#components/AppShell/hooks/useAppState'
import { useHasUserPermission } from '#components/Map/hooks/usePermissions'
import DialogModal from '#components/Templates/DialogModal'
@ -162,16 +163,7 @@ export function HeaderView({
className='!tw-text-base-content tw-cursor-pointer'
onClick={setPositionCallback}
>
<svg
stroke='currentColor'
fill='currentColor'
strokeWidth='0'
viewBox='0 0 512 512'
className='tw-w-5 tw-h-5'
xmlns='http://www.w3.org/2000/svg'
>
<path d='M256 0c17.7 0 32 14.3 32 32V42.4c93.7 13.9 167.7 88 181.6 181.6H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H469.6c-13.9 93.7-88 167.7-181.6 181.6V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V469.6C130.3 455.7 56.3 381.7 42.4 288H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H42.4C56.3 130.3 130.3 56.3 224 42.4V32c0-17.7 14.3-32 32-32zM107.4 288c12.5 58.3 58.4 104.1 116.6 116.6V384c0-17.7 14.3-32 32-32s32 14.3 32 32v20.6c58.3-12.5 104.1-58.4 116.6-116.6H384c-17.7 0-32-14.3-32-32s14.3-32 32-32h20.6C392.1 165.7 346.3 119.9 288 107.4V128c0 17.7-14.3 32-32 32s-32-14.3-32-32V107.4C165.7 119.9 119.9 165.7 107.4 224H128c17.7 0 32 14.3 32 32s-14.3 32-32 32H107.4zM256 224a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'></path>
</svg>
<img src={TargetDotSVG} alt='Position' className='tw-w-5 tw-h-5' />
</a>
</li>
)}

17
src/Components/Profile/Subcomponents/AvatarWidget.tsx
View File

@ -3,6 +3,7 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @typescript-eslint/prefer-optional-chain */
import ArrowUpTrayIcon from '@heroicons/react/24/outline/ArrowUpTrayIcon'
import UserIcon from '@heroicons/react/24/outline/UserIcon'
import { useState, useCallback, useRef } from 'react'
import { ReactCrop, centerCrop, makeAspectCrop } from 'react-image-crop'
@ -181,22 +182,10 @@ export const AvatarWidget: React.FC<AvatarWidgetProps> = ({ avatar, setAvatar })
</div>
) : (
<div className='tw-h-20 tw-w-20'>
<svg
xmlns='http://www.w3.org/2000/svg'
version='1.0'
viewBox='0 0 150 150'
<UserIcon
className='tw-w-20 tw-h-20 tw-rounded-full'
style={{ backgroundColor: '#eee' }}
>
<path
fill='#ccc'
d='M 104.68731,56.689353 C 102.19435,80.640493 93.104981,97.26875 74.372196,97.26875 55.639402,97.26875 46.988823,82.308034 44.057005,57.289941 41.623314,34.938838 55.639402,15.800152 74.372196,15.800152 c 18.732785,0 32.451944,18.493971 30.315114,40.889201 z'
/>
<path
fill='#ccc'
d='M 92.5675 89.6048 C 90.79484 93.47893 89.39893 102.4504 94.86478 106.9039 C 103.9375 114.2963 106.7064 116.4723 118.3117 118.9462 C 144.0432 124.4314 141.6492 138.1543 146.5244 149.2206 L 4.268444 149.1023 C 8.472223 138.6518 6.505799 124.7812 32.40051 118.387 C 41.80992 116.0635 45.66513 113.8823 53.58659 107.0158 C 58.52744 102.7329 57.52583 93.99267 56.43084 89.26926 C 52.49275 88.83011 94.1739 88.14054 92.5675 89.6048 z'
/>
</svg>
/>
</div>
)}
</label>

15
src/Components/Profile/Subcomponents/MarkdownHint.tsx
View File

@ -1,5 +1,7 @@
import { useState } from 'react'
import MarkdownSVG from '#assets/markdown.svg'
export const MarkdownHint = () => {
const [expended, setExpended] = useState<boolean>(false)
return (
@ -8,18 +10,7 @@ export const MarkdownHint = () => {
title='Markdown is supported'
className='flex tw-flex-row tw-text-gray-400 tw-cursor-pointer tw-items-center'
>
<svg
aria-hidden='true'
height='16'
viewBox='0 0 16 16'
version='1.1'
width='16'
data-view-component='true'
className='octicon octicon-markdown'
fill='rgb(156 163 175 / var(--tw-text-opacity))'
>
<path d='M14.85 3c.63 0 1.15.52 1.14 1.15v7.7c0 .63-.51 1.15-1.15 1.15H1.15C.52 13 0 12.48 0 11.84V4.15C0 3.52.52 3 1.15 3ZM9 11V5H7L5.5 7 4 5H2v6h2V8l1.5 1.92L7 8v3Zm2.99.5L14.5 8H13V5h-2v3H9.5Z'></path>
</svg>
<img src={MarkdownSVG} alt='Markdown' className='octicon octicon-markdown' />
{expended && (
<a
href='https://www.markdownguide.org/cheat-sheet/#basic-syntax'

24
src/Components/Profile/Subcomponents/SocialShareBar.tsx
View File

@ -1,5 +1,8 @@
import ClipboardDocumentIcon from '@heroicons/react/24/outline/ClipboardDocumentIcon'
import { toast } from 'react-toastify'
import ChevronSVG from '#assets/chevron.svg'
import SocialShareButton from './SocialShareButton'
const SocialShareBar = ({
@ -41,14 +44,7 @@ const SocialShareBar = ({
onClick={() => copyLink()}
title='share link via email'
>
<svg
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 24 24'
fill='white'
className='tw-h-4 tw-w-4'
>
<path d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z' />
</svg>
<img src={ChevronSVG} alt='\/' className='tw-h-4 tw-w-4' />
</a>
)}
{platforms.includes('clipboard') && (
@ -62,17 +58,7 @@ const SocialShareBar = ({
onClick={() => copyLink()}
title='copy Link'
>
<svg
stroke='currentColor'
fill='currentColor'
strokeWidth='0'
viewBox='0 0 256 256'
height='1.5em'
width='1.5em'
xmlns='http://www.w3.org/2000/svg'
>
<path d='M180,64H40A12,12,0,0,0,28,76V216a12,12,0,0,0,12,12H180a12,12,0,0,0,12-12V76A12,12,0,0,0,180,64ZM168,204H52V88H168ZM228,40V180a12,12,0,0,1-24,0V52H76a12,12,0,0,1,0-24H216A12,12,0,0,1,228,40Z'></path>
</svg>
<ClipboardDocumentIcon />
</div>
)}
</div>

56
src/Components/Profile/Subcomponents/SocialShareButton.tsx
View File

@ -5,72 +5,42 @@
import { cloneElement } from 'react'
import FacebookSVG from '#assets/facebook.svg'
import LinkedinSVG from '#assets/linkedin.svg'
import TelegramSVG from '#assets/telegram.svg'
import TwitterSVG from '#assets/twitter.svg'
import WhatsappSVG from '#assets/whatsapp.svg'
import XingSVG from '#assets/xing.svg'
const platformConfigs = {
facebook: {
shareUrl: 'https://www.facebook.com/sharer/sharer.php?u={url}',
icon: (
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'>
<path d='M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z' />
</svg>
),
icon: <img src={FacebookSVG} alt='Facebook' />,
bgColor: '#3b5998',
},
twitter: {
shareUrl: 'https://twitter.com/intent/tweet?text={title}:%20{url}',
icon: (
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'>
<path d='M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z' />
</svg>
),
icon: <img src={TwitterSVG} alt='Twitter' />,
bgColor: '#55acee',
},
linkedin: {
shareUrl: 'http://www.linkedin.com/shareArticle?mini=true&url={url}&title={title}',
icon: (
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'>
<path d='M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z' />
<circle cx='4' cy='4' r='2' />
</svg>
),
icon: <img src={LinkedinSVG} alt='Linkedin' />,
bgColor: '#4875b4',
},
xing: {
shareUrl: 'https://www.xing-share.com/app/user?op=share;sc_p=xing-share;url={url}',
icon: (
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'>
<path d='M18.188 0c-.517 0-.741.325-.927.66 0 0-7.455 13.224-7.702 13.657.015.024 4.919 9.023 4.919 9.023.17.308.436.66.967.66h3.454c.211 0 .375-.078.463-.22.089-.151.089-.346-.009-.536l-4.879-8.916c-.004-.006-.004-.016 0-.022L22.139.756c.095-.191.097-.387.006-.535C22.056.078 21.894 0 21.686 0h-3.498zM3.648 4.74c-.211 0-.385.074-.473.216-.09.149-.078.339.02.531l2.34 4.05c.004.01.004.016 0 .021L1.86 16.051c-.099.188-.093.381 0 .529.085.142.239.234.45.234h3.461c.518 0 .766-.348.945-.667l3.734-6.609-2.378-4.155c-.172-.315-.434-.659-.962-.659H3.648v.016z' />
</svg>
),
icon: <img src={XingSVG} alt='Xing' />,
bgColor: '#026466',
},
whatsapp: {
shareUrl: 'https://api.whatsapp.com/send?text={title}%20{url}',
icon: (
<svg
stroke='currentColor'
fill='currentColor'
strokeWidth='0'
viewBox='0 0 512 512'
xmlns='http://www.w3.org/2000/svg'
>
<path d='M497.39 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.66 370.66 0 0 1 130.6 204.11l60.6-49.6a23.94 23.94 0 0 0 6.9-28l-48-112A24.16 24.16 0 0 0 122.6.61l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.29 24.29 0 0 0-14.01-27.6z'></path>
</svg>
),
icon: <img src={WhatsappSVG} alt='Whatsapp' />,
bgColor: '#25D366',
},
telegram: {
shareUrl: 'https://t.me/share/url?url={url}&text={title}',
icon: (
<svg
stroke='white'
fill='white'
strokeWidth='0'
viewBox='0 0 448 512'
xmlns='http://www.w3.org/2000/svg'
>
<path d='M446.7 98.6l-67.6 318.8c-5.1 22.5-18.4 28.1-37.3 17.5l-103-75.9-49.7 47.8c-5.5 5.5-10.1 10.1-20.7 10.1l7.4-104.9 190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8 284 16.2 252.2c-22.1-6.9-22.5-22.1 4.6-32.7L418.2 66.4c18.4-6.9 34.5 4.1 28.5 32.2z'></path>
</svg>
),
icon: <img src={TelegramSVG} alt='Telegram' />,
bgColor: '#0088cc',
},
}

8
src/assets/chevron.svg Normal file
View File

@ -0,0 +1,8 @@
<svg
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 24 24'
fill='white'
className='tw-h-4 tw-w-4'
>
<path d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z' />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 310 B

3
src/assets/facebook.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'>
<path d='M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z' />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 170 B

4
src/assets/linkedin.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'>
<path d='M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z' />
<circle cx='4' cy='4' r='2' />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 231 B

12
src/assets/markdown.svg Normal file
View File

@ -0,0 +1,12 @@
<svg xmlns='http://www.w3.org/2000/svg'
aria-hidden='true'
height='16'
viewBox='0 0 16 16'
version='1.1'
width='16'
data-view-component='true'
className='octicon octicon-markdown'
fill='rgb(156 163 175 / var(--tw-text-opacity))'
>
<path d='M14.85 3c.63 0 1.15.52 1.14 1.15v7.7c0 .63-.51 1.15-1.15 1.15H1.15C.52 13 0 12.48 0 11.84V4.15C0 3.52.52 3 1.15 3ZM9 11V5H7L5.5 7 4 5H2v6h2V8l1.5 1.92L7 8v3Zm2.99.5L14.5 8H13V5h-2v3H9.5Z'></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 493 B

8
src/assets/target.svg Normal file
View File

@ -0,0 +1,8 @@
<svg
fill='currentColor'
viewBox='0 0 32 32'
version='1.1'
xmlns='http://www.w3.org/2000/svg'
>
<path d='M30 14.75h-2.824c-0.608-5.219-4.707-9.318-9.874-9.921l-0.053-0.005v-2.824c0-0.69-0.56-1.25-1.25-1.25s-1.25 0.56-1.25 1.25v0 2.824c-5.219 0.608-9.318 4.707-9.921 9.874l-0.005 0.053h-2.824c-0.69 0-1.25 0.56-1.25 1.25s0.56 1.25 1.25 1.25v0h2.824c0.608 5.219 4.707 9.318 9.874 9.921l0.053 0.005v2.824c0 0.69 0.56 1.25 1.25 1.25s1.25-0.56 1.25-1.25v0-2.824c5.219-0.608 9.318-4.707 9.921-9.874l0.005-0.053h2.824c0.69 0 1.25-0.56 1.25-1.25s-0.56-1.25-1.25-1.25v0zM17.25 24.624v-2.624c0-0.69-0.56-1.25-1.25-1.25s-1.25 0.56-1.25 1.25v0 2.624c-3.821-0.57-6.803-3.553-7.368-7.326l-0.006-0.048h2.624c0.69 0 1.25-0.56 1.25-1.25s-0.56-1.25-1.25-1.25v0h-2.624c0.57-3.821 3.553-6.804 7.326-7.368l0.048-0.006v2.624c0 0.69 0.56 1.25 1.25 1.25s1.25-0.56 1.25-1.25v0-2.624c3.821 0.57 6.803 3.553 7.368 7.326l0.006 0.048h-2.624c-0.69 0-1.25 0.56-1.25 1.25s0.56 1.25 1.25 1.25v0h2.624c-0.571 3.821-3.553 6.803-7.326 7.368l-0.048 0.006z'></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

10
src/assets/targetDot.svg Normal file
View File

@ -0,0 +1,10 @@
<svg
stroke='currentColor'
fill='currentColor'
strokeWidth='0'
viewBox='0 0 512 512'
className='tw-w-5 tw-h-5'
xmlns='http://www.w3.org/2000/svg'
>
<path d='M256 0c17.7 0 32 14.3 32 32V42.4c93.7 13.9 167.7 88 181.6 181.6H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H469.6c-13.9 93.7-88 167.7-181.6 181.6V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V469.6C130.3 455.7 56.3 381.7 42.4 288H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H42.4C56.3 130.3 130.3 56.3 224 42.4V32c0-17.7 14.3-32 32-32zM107.4 288c12.5 58.3 58.4 104.1 116.6 116.6V384c0-17.7 14.3-32 32-32s32 14.3 32 32v20.6c58.3-12.5 104.1-58.4 116.6-116.6H384c-17.7 0-32-14.3-32-32s14.3-32 32-32h20.6C392.1 165.7 346.3 119.9 288 107.4V128c0 17.7-14.3 32-32 32s-32-14.3-32-32V107.4C165.7 119.9 119.9 165.7 107.4 224H128c17.7 0 32 14.3 32 32s-14.3 32-32 32H107.4zM256 224a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

9
src/assets/telegram.svg Normal file
View File

@ -0,0 +1,9 @@
<svg
stroke='white'
fill='white'
strokeWidth='0'
viewBox='0 0 448 512'
xmlns='http://www.w3.org/2000/svg'
>
<path d='M446.7 98.6l-67.6 318.8c-5.1 22.5-18.4 28.1-37.3 17.5l-103-75.9-49.7 47.8c-5.5 5.5-10.1 10.1-20.7 10.1l7.4-104.9 190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8 284 16.2 252.2c-22.1-6.9-22.5-22.1 4.6-32.7L418.2 66.4c18.4-6.9 34.5 4.1 28.5 32.2z'></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 433 B

3
src/assets/twitter.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'>
<path d='M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z' />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 271 B

9
src/assets/whatsapp.svg Normal file
View File

@ -0,0 +1,9 @@
<svg
stroke='currentColor'
fill='currentColor'
strokeWidth='0'
viewBox='0 0 512 512'
xmlns='http://www.w3.org/2000/svg'
>
<path d='M497.39 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.66 370.66 0 0 1 130.6 204.11l60.6-49.6a23.94 23.94 0 0 0 6.9-28l-48-112A24.16 24.16 0 0 0 122.6.61l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.29 24.29 0 0 0-14.01-27.6z'></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 471 B

3
src/assets/xing.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'>
<path d='M18.188 0c-.517 0-.741.325-.927.66 0 0-7.455 13.224-7.702 13.657.015.024 4.919 9.023 4.919 9.023.17.308.436.66.967.66h3.454c.211 0 .375-.078.463-.22.089-.151.089-.346-.009-.536l-4.879-8.916c-.004-.006-.004-.016 0-.022L22.139.756c.095-.191.097-.387.006-.535C22.056.078 21.894 0 21.686 0h-3.498zM3.648 4.74c-.211 0-.385.074-.473.216-.09.149-.078.339.02.531l2.34 4.05c.004.01.004.016 0 .021L1.86 16.051c-.099.188-.093.381 0 .529.085.142.239.234.45.234h3.461c.518 0 .766-.348.945-.667l3.734-6.609-2.378-4.155c-.172-.315-.434-.659-.962-.659H3.648v.016z' />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 655 B