Drawing compass

A drafting compass.

File: drawing-compass.svg
viewBox: 0 0 668.8 1008.8
Weight: 2 KB

96px

160px

240px +

Use it

React

import { Illustration } from '@ba-icons/react';
import drawingCompass from '@ba-icons/illustrations/engineering/drawing-compass';

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

Vue

<script setup>
import { Illustration } from '@ba-icons/vue';
import drawingCompass from '@ba-icons/illustrations/engineering/drawing-compass';
</script>

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

Astro

---
import { Illustration } from '@ba-icons/astro';
import drawingCompass from '@ba-icons/illustrations/engineering/drawing-compass';
---

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

HTML

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

<ba-illustration name="engineering/drawing-compass" size="160"></ba-illustration>

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 668.8 1008.8" fill="currentColor"><path d="M48.4 942.4 62.4 907.4 55.4 887.4Q48.4 867.4 48.4 866.4Q48.4 865.4 94.4 739.9Q140.4 614.4 140.4 614.4Q140.4 614.4 80.4 614.4H19.4V597.4V580.4H86.4H153.4L155.4 576.4Q156.4 572.4 175.4 521.4Q194.4 470.4 194.9 469.9Q195.4 469.4 210.4 475.4L226.4 481.4L222.4 491.4Q219.4 501.4 204.4 540.4Q190.4 579.4 190.4 579.9Q190.4 580.4 254.4 580.4H317.4V553.4V526.4H334.4H351.4V553.4V580.4H419.4H488.4L477.4 552.4Q449.4 476.4 449.9 475.4Q450.4 474.4 458.4 471.9Q466.4 469.4 473.9 466.9Q481.4 464.4 481.4 465.4Q482.4 465.4 503.4 523.4L524.4 580.4H587.4H649.4V597.4V614.4H593.4H537.4L583.4 740.4L630.4 866.4L623.4 886.4Q616.4 905.4 616.4 906.9Q616.4 908.4 629.4 943.4Q642.4 978.4 641.9 978.9Q641.4 979.4 626.9 984.4Q612.4 989.4 611.4 989.4Q610.4 989.4 595.4 948.4L580.4 907.4L587.4 887.4L594.4 867.4L547.4 740.4L500.4 614.4H426.4H351.4V641.4V669.4H334.4H317.4V641.4V614.4H247.4H177.4L130.4 739.4Q84.4 865.4 84.4 867.4Q84.4 869.4 91.4 888.4L98.4 907.4L83.4 948.4Q68.4 989.4 66.4 989.4Q64.4 989.4 50.4 983.9Q36.4 978.4 35.9 978.4Q35.4 978.4 48.4 942.4ZM309.4 473.4Q277.4 467.4 252.4 452.4Q198.4 419.4 182.4 359.4Q172.4 320.4 183.4 281.4Q199.4 226.4 248.4 194.4Q285.4 169.4 330.4 168.4Q375.4 167.4 414.4 190.4Q451.4 211.4 472.4 250.4Q501.4 302.4 486.4 359.4Q475.4 400.4 445.4 429.9Q415.4 459.4 375.4 469.4Q341.4 478.4 309.4 473.4ZM358.4 439.4Q382.4 434.4 401.4 422.4Q437.4 399.4 450.4 359.4Q464.4 318.4 447.9 277.4Q431.4 236.4 391.4 215.4Q347.4 192.4 297.4 207.4Q267.4 217.4 245.4 239.9Q223.4 262.4 216.4 292.4Q205.4 331.4 222.4 369.4Q235.4 399.4 263.4 418.9Q291.4 438.4 325.4 441.4Q339.4 442.4 358.4 439.4ZM317.4 78.4V19.4H334.4H351.4V78.4V137.4H334.4H317.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/engineering/drawing-compass.svg

<img src="https://icons.atmosphere.africa/svg/engineering/drawing-compass.svg" alt="Drawing compass" width="160">

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

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

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