@atlaskit/logo
Version:
A logo is a visual representation of a brand or app. It can be a word, an image, or a combination of both.
38 lines (37 loc) • 3.33 kB
JavaScript
/**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::9e78739b079de5cf7483ff0a4d5033b8>>
* @codegenCommand yarn workspace @atlaskit/logo generate:components
*/
import React from 'react';
import { LogoWrapper } from '../../../utils/logo-wrapper';
// `height` is set to 100% to allow the SVG to scale with the parent element
// The text color is set to "currentColor" to allow the SVG to inherit the color set by the parent based on the theme.
const svg = `<svg height="100%" viewBox="0 0 154 32">
<path fill="var(--text-color, #1e1f21)" d="M146 25.64c-4.6 0-7.3-3.4-7.3-8s2.7-7.94 7.3-7.94c4.57 0 7.24 3.34 7.24 7.94s-2.67 8-7.24 8m0-13.49c-3.28 0-4.72 2.58-4.72 5.49s1.44 5.55 4.72 5.55c3.25 0 4.66-2.64 4.66-5.55s-1.41-5.49-4.66-5.49m-16.68 13.49c-4.6 0-7.3-3.4-7.3-8s2.7-7.94 7.3-7.94c4.57 0 7.24 3.34 7.24 7.94s-2.67 8-7.24 8m0-13.49c-3.28 0-4.72 2.58-4.72 5.49s1.44 5.55 4.72 5.55c3.25 0 4.66-2.64 4.66-5.55s-1.41-5.49-4.66-5.49m-12.07 5.52c0-3.68-1.47-5.52-4.2-5.52-2.36 0-4.48 1.5-4.48 4.91v1.23c0 3.4 1.93 4.91 4.17 4.91 2.98 0 4.51-1.96 4.51-5.52m-3.8 7.97c-2.24 0-3.96-1.01-4.88-3v2.7h-2.64V3.59h2.64v9.17c.98-2.02 2.82-3.07 5.18-3.07 4.08 0 6.13 3.47 6.13 7.97 0 4.32-2.15 7.97-6.44 7.97m-21.58-8.82v8.53h-2.64v-9.26c0-2.76-1.1-3.99-3.62-3.99-2.45 0-4.14 1.63-4.14 4.72v8.53h-2.64V10h2.64v2.52c.98-1.81 2.79-2.82 4.85-2.82 2.61 0 4.39 1.32 5.15 3.74.86-2.36 2.91-3.74 5.46-3.74 3.43 0 5.34 2.33 5.34 6.66v8.99h-2.64v-8.52c0-3.16-1.1-4.72-3.62-4.72-2.45 0-4.14 1.63-4.14 4.72m-28.32.84c0 3.68 1.47 5.52 4.2 5.52 2.36 0 4.48-1.5 4.48-4.91v-1.23c0-3.4-1.93-4.91-4.17-4.91-2.97 0-4.51 1.96-4.51 5.52m8.68 7.67v-2.76c-.98 2.02-2.82 3.07-5.18 3.07-4.08 0-6.13-3.46-6.13-7.97 0-4.32 2.15-7.97 6.44-7.97 2.24 0 3.96 1.01 4.88 3.01V10h2.64v15.33zm-20.23-9.04H45.8v6.29h6.26c2.64 0 3.83-.95 3.83-2.97 0-2.15-1.13-3.31-3.89-3.31m-.89-8.46h-5.3v6.01h5.31c2.61 0 3.68-1.2 3.68-3.13 0-1.96-1.16-2.88-3.68-2.88m-8.06 17.51V5.19h8.43c4.11 0 6.1 2.02 6.1 5.28 0 2.42-1.1 3.93-3.37 4.48 2.97.49 4.45 2.12 4.45 4.97 0 3.22-2.18 5.43-6.68 5.43z"/>
<path fill="var(--tile-color, white)" d="M8 .667h16A7.333 7.333 0 0 1 31.333 8v16A7.333 7.333 0 0 1 24 31.333H8A7.333 7.333 0 0 1 .667 24V8A7.333 7.333 0 0 1 8 .667"/>
<path fill="none" stroke="var(--border-color, #dddee1)" stroke-width="1.333" d="M8 .667h16A7.333 7.333 0 0 1 31.333 8v16A7.333 7.333 0 0 1 24 31.333H8A7.333 7.333 0 0 1 .667 24V8A7.333 7.333 0 0 1 8 .667Z"/>
<path fill="var(--icon-color, #1868db)" d="M12.287 16.869a3.665 3.665 0 0 0 3.665 3.656v5.607c-4.71 0-8.602-3.52-9.196-8.06zm12.347 0a.584.584 0 0 1 .581.624c-.295 4.415-3.71 7.986-8.057 8.554l-1.206-5.521a3.67 3.67 0 0 0 3.63-3.161.59.59 0 0 1 .589-.496zm-8.683-3.656a3.664 3.664 0 0 0-3.665 3.656h-5.62v-.088c.044-4.66 3.557-8.498 8.078-9.088zm0-7.964a.58.58 0 0 1 .96-.44l6.432 5.518c.27.232.27.65 0 .883l-6.431 5.517a.581.581 0 0 1-.96-.44z"/>
</svg>
`;
/**
* __BambooLogoCS__
*
* An internal component to represent the logo for Bamboo.
*
*/
export function BambooLogoCS({
size = 'medium',
appearance = 'brand',
label = 'Bamboo',
testId
}) {
return /*#__PURE__*/React.createElement(LogoWrapper, {
svg: svg,
label: label,
type: "data-center",
appearance: appearance,
size: size,
testId: testId
});
}