Book

An open book.

File: book.svg
viewBox: 0 0 982.1 667.8
Weight: 2 KB

96px

160px

240px +

Use it

React

import { Illustration } from '@ba-icons/react';
import book from '@ba-icons/illustrations/media/book';

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

Vue

<script setup>
import { Illustration } from '@ba-icons/vue';
import book from '@ba-icons/illustrations/media/book';
</script>

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

Astro

---
import { Illustration } from '@ba-icons/astro';
import book from '@ba-icons/illustrations/media/book';
---

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

HTML

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

<ba-illustration name="media/book" size="160"></ba-illustration>

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 982.1 667.8" fill="currentColor"><path d="M339.2 242.9Q340.2 243.9 341.2 245.4Q342.2 246.9 343.2 248.4Q344.2 249.9 344.2 250.9Q343.2 249.9 341.2 247.9Q339.2 246.9 338.2 245.9Q338.2 245.9 338.7 244.4Q339.2 242.9 339.2 242.9ZM802.2 18.9Q809.2 18.9 809.2 23.9Q809.2 30.9 685.7 65.4Q562.2 99.9 548.2 107.9Q528.2 118.9 536.2 122.9Q543.2 125.9 559.2 117.9Q585.2 105.9 715.7 69.9Q846.2 33.9 851.2 37.9Q857.2 41.9 846.2 45.9Q831.2 51.9 702.2 88.9Q662.2 100.9 629.2 110.9Q596.2 120.9 577.2 127.4Q558.2 133.9 560.2 134.9Q564.2 137.9 722.7 93.9Q881.2 49.9 891.2 49.9Q910.2 49.9 880.2 60.9Q840.2 75.9 705.2 113.9Q529.2 162.9 515.2 166.9Q508.2 168.9 504.7 164.9Q501.2 160.9 501.2 150.9Q501.2 124.9 538.2 103.9Q575.2 82.9 666.2 56.9Q782.2 23.9 796.2 19.9Q799.2 18.9 802.2 18.9ZM178.2 18.9Q181.2 18.9 185.2 19.9Q198.2 23.9 317.2 57.9Q409.2 83.9 444.2 103.9Q479.2 123.9 479.2 150.9Q479.2 169.9 471.2 168.9Q463.2 167.9 286.2 116.9Q83.2 57.9 83.2 54.9Q83.2 53.9 89.2 52.9Q100.2 49.9 267.2 96.9Q313.2 108.9 350.7 118.9Q388.2 128.9 409.7 133.9Q431.2 138.9 430.2 137.9Q424.2 130.9 278.2 88.9Q127.2 45.9 126.2 40.9Q126.2 39.9 129.2 36.9Q135.2 32.9 282.7 75.4Q430.2 117.9 441.2 120.9L444.2 119.9L435.2 111.9Q419.2 99.9 295.2 65.9Q171.2 31.9 171.2 23.9Q171.2 18.9 178.2 18.9ZM30.2 73.9Q44.2 73.9 220.2 124.9L397.2 174.9L399.2 403.9Q400.2 468.9 399.7 519.4Q399.2 569.9 397.7 600.9Q396.2 631.9 394.2 631.9Q386.2 630.9 204.2 577.9L22.2 524.9L19.2 298.9Q18.2 165.9 20.2 119.9Q22.2 73.9 30.2 73.9ZM950.2 73.9Q958.2 73.9 960.7 120.9Q963.2 167.9 963.2 299.9V524.9L781.2 576.9Q598.2 628.9 588.2 631.9Q585.2 631.9 583.2 603.4Q581.2 574.9 580.7 523.9Q580.2 472.9 581.2 404.9L584.2 174.9L760.2 124.9Q936.2 74.9 950.2 73.9ZM424.2 185.9H490.2H556.2V416.9V648.9H490.2H424.2V416.9Z"></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/media/book.svg

<img src="https://icons.atmosphere.africa/svg/media/book.svg" alt="Book" width="160">

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

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

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