Tutorial

A video call on a laptop.

File: tutorial.svg
viewBox: 0 0 1008.8 730.8
Weight: 1 KB

96px

160px

240px +

Use it

React

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

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

Vue

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

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

Astro

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

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

HTML

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

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

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1008.8 730.8" fill="currentColor"><path d="M19.4 679.4V647.4L66.4 603.4L112.4 560.4V289.4V19.4H505.4H898.4L899.4 290.4V562.4L944.4 604.4L989.4 646.4V679.4V711.4H504.4H19.4ZM837.4 292.4V89.4H505.4H174.4V292.4V495.4H505.4H837.4ZM372.4 467.4Q366.4 401.4 370.4 382.4Q379.4 351.4 426.4 332.9Q473.4 314.4 529.4 320.4Q614.4 329.4 634.4 372.4Q642.4 387.4 638.4 452.4L637.4 480.4H505.4H373.4ZM484.4 298.4Q447.4 282.4 438.4 250.4Q434.4 236.4 432.4 212.4Q430.4 188.4 431.4 177.4Q433.4 160.4 441.9 147.4Q450.4 134.4 464.4 127.4Q478.4 120.4 497.4 118.4Q546.4 115.4 567.4 146.4Q579.4 164.4 577.4 202.4Q576.4 236.4 569.9 254.4Q563.4 272.4 549.4 284.4Q534.4 296.4 516.4 300.4Q498.4 304.4 484.4 298.4Z"></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/tutorial.svg

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

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

illustrationUrl('office-work/tutorial');
// → https://icons.atmosphere.africa/svg/office-work/tutorial.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/tutorial.svg') center / contain no-repeat;
}

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