Coffee time

A worker at a laptop with a mug.

File: coffee-time.svg
Original name: Coffee Time
viewBox: 0 0 1008.8 1009.2
Weight: 2 KB

96px

160px

240px +

Use it

React

import { Illustration } from '@ba-icons/react';
import coffeeTime from '@ba-icons/illustrations/office-work/coffee-time';

<Illustration asset={coffeeTime} size={160} />

Vue

<script setup>
import { Illustration } from '@ba-icons/vue';
import coffeeTime from '@ba-icons/illustrations/office-work/coffee-time';
</script>

<template>
  <Illustration :asset="coffeeTime" :size="160" />
</template>

Astro

---
import { Illustration } from '@ba-icons/astro';
import coffeeTime from '@ba-icons/illustrations/office-work/coffee-time';
---

<Illustration asset={coffeeTime} size={160} />

HTML

<script src="https://icons.atmosphere.africa/cdn/ba-icons-0.4.0.js" defer></script>

<ba-illustration name="office-work/coffee-time" size="160"></ba-illustration>

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1008.8 1009.2" fill="currentColor"><path d="M19.4 989.8Q19.4 988.8 19.4 966.8V944.8H143.4L266.4 943.8Q255.4 940.8 250.4 930.8Q247.4 924.8 247.4 786.8V650.8L249.4 646.8Q254.4 636.8 263.4 632.8L268.4 630.8H503.4Q699.4 630.8 721.9 631.3Q744.4 631.8 751.4 635.8Q758.4 639.8 761.4 648.8L763.4 652.8V787.8V923.8L761.4 928.8Q757.4 939.8 746.4 943.8L741.4 944.8H764.4H787.4L789.4 939.8Q792.4 931.8 792.9 915.8Q793.4 899.8 793.4 786.8Q793.4 649.8 792.4 644.8Q782.4 609.8 747.4 603.8Q741.4 601.8 730.4 601.8H719.4V531.8V461.8H743.4H767.4L770.4 463.8Q801.4 481.8 918.4 694.8Q958.4 767.8 967.4 785.8Q1001.4 853.8 981.4 889.8Q973.4 904.8 957.4 916.8Q927.4 938.8 871.4 943.8Q862.4 944.8 859.4 944.8H923.4H989.4V967.8V989.8H504.4Q305.4 989.8 162.9 989.8Q20.4 989.8 19.4 989.8ZM100.4 888.8Q70.4 883.8 49.4 865.3Q28.4 846.8 21.4 818.8Q19.4 812.8 19.4 610.8Q19.4 442.8 19.9 419.8Q20.4 396.8 24.4 385.8Q32.4 362.8 51.4 346.8Q74.4 326.8 105.4 324.8Q136.4 322.8 162.4 339.8Q178.4 349.8 188.4 363.8Q198.4 377.8 202.4 394.8Q204.4 401.8 204.4 504.8L205.4 608.8L286.4 540.8Q377.4 465.8 381.4 463.8L385.4 461.8H409.4H433.4V531.8V601.8L348.4 602.8H264.4L258.4 604.8Q229.4 613.8 219.4 640.8L217.4 646.8V738.8V830.8L199.4 844.8Q181.4 859.8 176.4 864.8Q154.4 883.8 127.4 887.8Q122.4 888.8 112.9 888.8Q103.4 888.8 100.4 888.8ZM557.4 583.8 561.4 568.8 536.4 545.8 512.4 521.8 544.4 491.8 576.4 461.8 608.4 491.8 640.4 521.8 615.4 545.8 591.4 568.8 595.4 584.8Q598.4 601.8 597.9 601.8Q597.4 601.8 575.9 601.8Q554.4 601.8 554.4 600.8Q554.4 599.8 557.4 583.8ZM567.4 433.8Q551.4 432.8 538.4 430.8Q487.4 422.8 445.9 392.8Q404.4 362.8 381.4 317.8Q350.4 258.8 361.4 193.8Q373.4 127.8 423.4 80.8Q480.4 25.8 564.4 19.8Q595.4 17.8 629.4 25.8Q674.4 36.8 711.4 64.8Q748.4 92.8 769.4 132.8Q793.4 176.8 793.4 226.8Q793.4 276.8 769.4 321.8Q752.4 352.8 726.4 376.8Q700.4 400.8 667.4 415.3Q634.4 429.8 598.4 432.8Q580.4 434.8 567.4 433.8ZM19.4 176.8V66.8H112.4H204.4V74.8V81.8H215.4Q240.4 81.8 259.4 91.8Q286.4 104.8 299.4 129.8Q308.4 146.8 308.4 171.8Q309.4 202.8 302.4 220.8Q285.4 260.8 242.4 270.8Q235.4 272.8 220.4 273.8H204.4V280.8V288.8H112.4Q20.4 288.8 19.9 288.3Q19.4 287.8 19.4 176.8ZM241.4 228.8Q258.4 221.8 265.4 201.8Q267.4 195.8 267.4 177.8Q267.4 159.8 265.4 155.8Q260.4 139.8 248.4 131.8Q235.4 121.8 214.4 121.8H204.4V177.8V234.8L216.4 233.8Q227.4 233.8 231.4 232.8Q235.4 231.8 241.4 228.8Z"></path></svg>

From the CDN

Link to the file instead of installing it: for <img>, CSS, emails and docs, with nothing added to your bundle. Served with CORS and cached for an hour.

https://icons.atmosphere.africa/svg/office-work/coffee-time.svg

<img src="https://icons.atmosphere.africa/svg/office-work/coffee-time.svg" alt="Coffee time" width="160">

import { illustrationUrl } from '@ba-icons/illustrations';

illustrationUrl('office-work/coffee-time');
// → https://icons.atmosphere.africa/svg/office-work/coffee-time.svg

As an <img> it draws in black. To give it the text colour, use it as a mask:

.mark {
  background-color: currentColor;
  mask: url('https://icons.atmosphere.africa/svg/office-work/coffee-time.svg') center / contain no-repeat;
}

New to the packages? Point your project at the registry first.