@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.
36 lines (35 loc) • 3.85 kB
JavaScript
/**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::f198a1314d927237eb1f1a9cf7252e1d>>
* @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 86 24">
<path fill="var(--tile-color,#dddee1)" d="M0 6a6 6 0 0 1 6-6h12a6 6 0 0 1 6 6v12a6 6 0 0 1-6 6H6a6 6 0 0 1-6-6z"/>
<path fill="var(--icon-color, #101214)" fill-rule="evenodd" d="m5.106 14.44 1.856-1.856-1.856-1.856L6.653 9.18h3.712l2.784-2.784h4.332v4.33l-2.785 2.785v3.712L13.15 18.77l-1.857-1.856-1.856 1.856-1.7-1.7 2.784-2.784-.928-.928-2.784 2.784zm10.209-4.331a1.094 1.094 0 1 1-1.547-1.546 1.094 1.094 0 0 1 1.547 1.546" clip-rule="evenodd"/>
<path fill="var(--text-color, #292a2e)" d="M81.97 17.15q-.9 0-1.6-.25a2.84 2.84 0 0 1-1.14-.75 2.5 2.5 0 0 1-.57-1.2l1.8-.32q.15.55.54.82t1.03.27q.61 0 .98-.24.36-.24.36-.61 0-.31-.25-.51t-.76-.31l-1.31-.27q-1.09-.23-1.63-.77t-.54-1.39q0-.72.4-1.24.4-.53 1.1-.81.71-.29 1.65-.29.89 0 1.53.25.65.25 1.05.7.4.44.55 1.06l-1.71.31a1.3 1.3 0 0 0-.46-.66q-.33-.27-.92-.27-.53 0-.89.23t-.36.6q0 .32.23.52.24.2.8.33l1.34.27q1.1.23 1.63.74.54.51.54 1.33 0 .74-.43 1.3-.43.55-1.19.87-.75.31-1.74.31m-4.26-7.81v1.48H73.3V9.36zm-3.38-1.82h1.92v7.27q0 .38.17.57t.56.19q.12 0 .32-.03.21-.03.32-.06l.29 1.46q-.31.1-.64.13a5 5 0 0 1-.62.04q-1.13 0-1.73-.55-.59-.56-.59-1.59zm-5.13 9.61q-1.13 0-1.96-.49a3.3 3.3 0 0 1-1.28-1.38q-.45-.89-.45-2.06 0-1.18.45-2.07.45-.9 1.28-1.39t1.96-.49q.66 0 1.22.17t1 .49.73.78.41 1.03l-1.8.36q-.06-.3-.2-.54a1.5 1.5 0 0 0-.33-.4 1.3 1.3 0 0 0-.44-.26 1.6 1.6 0 0 0-.56-.09q-.58 0-.97.31t-.59.86q-.2.54-.2 1.24t.2 1.24.59.86q.39.31.97.31.32 0 .57-.09.26-.09.46-.27t.34-.42q.14-.25.2-.56l1.79.35q-.11.6-.4 1.06a2.8 2.8 0 0 1-.73.79 3.3 3.3 0 0 1-1 .51q-.56.17-1.23.17m-8.29-.02q-1.16 0-2-.48a3.26 3.26 0 0 1-1.29-1.37q-.45-.88-.45-2.08 0-1.18.45-2.06a3.4 3.4 0 0 1 1.26-1.39q.82-.5 1.93-.5.73 0 1.36.23.64.23 1.14.71.49.47.77 1.2t.28 1.72v.57h-6.34v-1.25h5.39l-.9.35a2.8 2.8 0 0 0-.19-1.08 1.55 1.55 0 0 0-.57-.72q-.37-.26-.93-.26-.55 0-.94.26t-.59.7-.2.99v.88q0 .69.23 1.17.24.47.66.71t.98.24q.37 0 .68-.11t.53-.31a1.4 1.4 0 0 0 .34-.52l1.75.34q-.18.62-.64 1.09-.45.46-1.13.73-.68.25-1.54.25m-7.19-7.8h1.93v8.06q0 .86-.33 1.39-.33.54-.95.79-.61.26-1.48.26h-.39v-1.54h.27q.52 0 .73-.24.22-.23.22-.69zm-.03-1.09V6.51h1.98v1.76zm-5.15 8.88q-1.13 0-1.97-.49a3.3 3.3 0 0 1-1.28-1.38q-.45-.89-.45-2.06 0-1.18.45-2.07.45-.9 1.28-1.39t1.97-.49q1.13 0 1.96.49t1.29 1.39q.45.89.45 2.07t-.45 2.07a3.3 3.3 0 0 1-1.28 1.38q-.83.49-1.96.49m0-1.53q.58 0 .97-.31.39-.32.58-.87a3.7 3.7 0 0 0 .19-1.23 3.7 3.7 0 0 0-.19-1.23 1.87 1.87 0 0 0-.58-.86q-.39-.32-.97-.32t-.97.32q-.38.32-.58.86-.19.54-.19 1.23 0 .68.19 1.23.2.55.58.87.39.31.97.31M39.95 17V9.36h1.87v1.31h.08q.21-.68.71-1.05a1.93 1.93 0 0 1 1.16-.36q.15 0 .33.02.19.01.32.04v1.74a2 2 0 0 0-.38-.07 5 5 0 0 0-.48-.03q-.48 0-.86.21a1.5 1.5 0 0 0-.6.57 1.65 1.65 0 0 0-.21.85V17zm-8.98 0V6.81h3.9q1.16 0 1.97.45.81.44 1.22 1.21.42.77.42 1.76t-.42 1.76-1.25 1.2q-.81.43-1.99.43h-2.53v-1.6h2.25q.66 0 1.09-.22.43-.23.64-.64.2-.41.21-.93 0-.53-.2-.93a1.44 1.44 0 0 0-.64-.63q-.43-.23-1.09-.23h-1.6V17z"/>
</svg>
`;
/**
* __ProjectsLogo__
*
* An internal component to represent the logo for Projects.
*
*/
export function ProjectsLogo({
size = 'medium',
appearance = 'brand',
label = 'Projects',
testId
}) {
return /*#__PURE__*/React.createElement(LogoWrapper, {
svg: svg,
label: label,
appearance: appearance,
size: size,
testId: testId
});
}