Blueprint roll

A rolled drawing.

File: blueprint-roll.svg
viewBox: 0 0 1008.8 1009.3
Weight: 1 KB

96px

160px

240px +

Use it

React

import { Illustration } from '@ba-icons/react';
import blueprintRoll from '@ba-icons/illustrations/engineering/blueprint-roll';

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

Vue

<script setup>
import { Illustration } from '@ba-icons/vue';
import blueprintRoll from '@ba-icons/illustrations/engineering/blueprint-roll';
</script>

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

Astro

---
import { Illustration } from '@ba-icons/astro';
import blueprintRoll from '@ba-icons/illustrations/engineering/blueprint-roll';
---

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

HTML

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

<ba-illustration name="engineering/blueprint-roll" size="160"></ba-illustration>

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1008.8 1009.3" fill="currentColor"><path d="M173.4 988.9Q91.4 978.9 47.4 930.9Q26.4 906.9 21.4 880.9Q19.4 871.9 19.4 501.9V131.9L23.4 121.9Q33.4 89.9 61.4 66.4Q89.4 42.9 130.4 30.9Q204.4 7.9 275.4 30.9Q308.4 40.9 327.4 52.9Q356.4 71.9 372.4 95.9Q383.4 113.9 384.4 122.9Q384.4 123.9 385.4 127.9L386.4 130.9H687.4H989.4V560.9V989.9H586.4Q184.4 989.9 173.4 988.9ZM950.4 560.9V163.9H668.4H387.4V510.9Q387.4 858.9 386.4 864.9Q380.4 891.9 347.4 909.9Q308.4 929.9 246.4 929.9Q176.4 929.9 144.4 900.9Q128.4 886.9 127.4 868.9Q125.4 844.9 147.4 826.9Q162.4 814.9 183.4 809.9Q206.4 803.9 239.4 809.9Q274.4 815.9 273.4 819.9Q272.4 820.9 265.4 835.9L258.4 849.9L251.4 846.9Q230.4 840.9 206.4 840.9Q186.4 841.9 176.4 848.9Q164.4 858.9 167.9 869.9Q171.4 880.9 188.4 887.9Q218.4 899.9 266.4 895.9Q314.4 891.9 334.4 875.9Q349.4 863.9 346.4 845.9Q344.4 826.9 326.4 809.9Q305.4 788.9 266.9 776.9Q228.4 764.9 191.4 767.9Q142.4 771.9 107.4 791.9Q72.4 811.9 63.4 840.9Q58.4 858.9 59.4 870.9Q65.4 904.9 100.9 928.4Q136.4 951.9 187.4 955.9Q198.4 956.9 574.4 956.9H950.4ZM70.4 773.9Q85.4 762.9 104.4 754.9Q134.4 741.9 171.4 735.9Q180.4 734.9 206.4 734.9Q232.4 734.9 241.4 736.9Q278.4 742.9 308.4 755.9Q325.4 763.9 341.4 775.9L348.4 780.9L347.4 458.9V137.9L344.4 129.9Q337.4 107.9 319.4 91.9Q298.4 72.9 262.4 61.9Q216.4 47.9 170.4 55.9Q128.4 62.9 104.4 78.9Q73.4 99.9 64.4 122.9Q59.4 134.9 58.9 171.9Q58.4 208.9 58.4 465.9V782.9L61.4 780.9Q63.4 778.9 70.4 773.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/engineering/blueprint-roll.svg

<img src="https://icons.atmosphere.africa/svg/engineering/blueprint-roll.svg" alt="Blueprint roll" width="160">

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

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

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