Distribution hub

A hub with spokes to satellites.

File: distribution-hub.svg
Original name: Distribution A
viewBox: 0 0 916.6 939.4
Weight: 2 KB

96px

160px

240px +

Use it

React

import { Illustration } from '@ba-icons/react';
import distributionHub from '@ba-icons/illustrations/distribution/distribution-hub';

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

Vue

<script setup>
import { Illustration } from '@ba-icons/vue';
import distributionHub from '@ba-icons/illustrations/distribution/distribution-hub';
</script>

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

Astro

---
import { Illustration } from '@ba-icons/astro';
import distributionHub from '@ba-icons/illustrations/distribution/distribution-hub';
---

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

HTML

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

<ba-illustration name="distribution/distribution-hub" size="160"></ba-illustration>

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 916.6 939.4" fill="currentColor"><path d="M484 919.3Q434 909.3 407 867.3Q380 825.3 395 780.3Q400 764.3 412 748.3Q424 732.3 437 724.3Q451 715.3 451 710.3Q451 705.3 432.5 643.8Q414 582.3 412 580.3Q410 578.3 390 574.3Q323 562.3 292.5 504.8Q262 447.3 292 389.3Q302 371.3 323 353.3Q344 335.3 364 327.3Q394 316.3 429.5 320.3Q465 324.3 490 341.3Q505 351.3 511.5 348.3Q518 345.3 599 268.3L681 190.3L674 177.3Q663 155.3 661.5 131.8Q660 108.3 668.5 86.8Q677 65.3 695 48.3Q726 20.3 771 18.3Q807 16.3 836 31.8Q865 47.3 881 77.3Q891 96.3 891 125.3Q891 154.3 883 169.3Q866 205.3 827 223.3Q805 233.3 780 233.3Q755 233.3 736 227.3L716 222.3L627 306.3L537 390.3L543 405.3Q553 430.3 547 484.3Q546 491.3 568 505.3Q586 517.3 672 566.3Q798 638.3 803 636.3Q851 620.3 880 647.3Q903 668.3 897.5 697.3Q892 726.3 862 740.3Q829 755.3 800 734.3Q779 719.3 775 694.3L772 678.3L647 606.3Q522 534.3 517.5 534.3Q513 534.3 504.5 542.8Q496 551.3 480 559.8Q464 568.3 463 569.3Q461 570.3 480 632.8Q499 695.3 502 698.3Q505 702.3 523 704.3Q566 708.3 596.5 745.3Q627 782.3 622 822.3Q618 853.3 597.5 877.8Q577 902.3 546.5 913.8Q516 925.3 484 919.3ZM529 870.3Q556 859.3 567 835.8Q578 812.3 568 788.3Q550 749.3 506 749.3Q478 749.3 459 766.8Q440 784.3 440 810.3Q440 845.3 468.5 863.8Q497 882.3 529 870.3ZM453 521.3Q486 505.3 497 473.8Q508 442.3 492.5 412.3Q477 382.3 442 370.3Q418 361.3 389.5 369.3Q361 377.3 345 397.3Q329 417.3 327.5 441.8Q326 466.3 337 486.3Q348 506.3 370 518.8Q392 531.3 419 529.3Q439 528.3 453 521.3ZM814 177.3Q835 164.3 841 139.3Q847 114.3 834 93.3Q827 82.3 809.5 71.8Q792 61.3 780 61.3Q756 61.3 737.5 74.8Q719 88.3 713.5 107.8Q708 127.3 715 148.3Q723 167.3 740 177.8Q757 188.3 776 188.3Q795 188.3 814 177.3ZM111 733.3Q82 719.3 78 688.3Q74 657.3 99 637.3Q112 627.3 125.5 624.3Q139 621.3 153 624.8Q167 628.3 180 639.3Q202 657.3 199 687.3Q196 720.3 166 733.3Q138 745.3 111 733.3ZM211 636.3Q198 632.3 194 620.8Q190 609.3 197 600.3Q202 595.3 233 569.3Q250 556.3 260 550.3Q270 544.3 278 543.8Q286 543.3 291 549.3Q303 560.3 297 571.8Q291 583.3 259 609.3Q236 628.3 227 633.3Q218 638.3 211 636.3ZM202 305.3Q159 271.3 151.5 257.8Q144 244.3 160 232.3Q170 225.3 182 231.8Q194 238.3 234 271.3Q264 296.3 272.5 304.8Q281 313.3 282 320.3Q283 331.3 277 338.3Q271 345.3 260 345.3Q250 345.3 202 305.3ZM61 243.3Q49 240.3 36.5 227.8Q24 215.3 20 203.3Q15 183.3 23 165.3Q31 147.3 46.5 137.8Q62 128.3 82.5 128.8Q103 129.3 120 143.3Q155 172.3 135 212.3Q126 230.3 104 239.8Q82 249.3 61 243.3Z"></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/distribution/distribution-hub.svg

<img src="https://icons.atmosphere.africa/svg/distribution/distribution-hub.svg" alt="Distribution hub" width="160">

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

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

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