@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.
41 lines (38 loc) • 3.91 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.StudioLogo = StudioLogo;
var _react = _interopRequireDefault(require("react"));
var _logoWrapper = require("../../../utils/logo-wrapper");
/**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::c930709e33e851f9f7cd44c5b506c355>>
* @codegenCommand yarn workspace @atlaskit/logo generate:components
*/
// `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.
var svg = "<svg height=\"100%\" viewBox=\"0 0 74 24\">\n <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\"/>\n <path fill=\"var(--icon-color, #101214)\" fill-rule=\"evenodd\" d=\"M10.594 18.563v-7.97h7.969v7.97zm3.808-6.488-.163.429c-.235.615-.352.922-.572 1.155s-.52.368-1.12.638l-.222.1v.357l.222.099c.6.27.9.405 1.12.638s.337.54.572 1.156l.163.428h.347l.163-.429c.235-.615.352-.922.572-1.155s.52-.368 1.12-.638l.221-.1v-.357l-.22-.1c-.601-.269-.901-.404-1.121-.637s-.337-.54-.572-1.155l-.164-.429z\" clip-rule=\"evenodd\"/>\n <path fill=\"var(--icon-color, #101214)\" d=\"M14.813 7.195 10.125 4.5 5.438 7.195v5.39l3.75 2.157V9.187h5.625z\"/>\n <path fill=\"var(--text-color, #292a2e)\" d=\"M69.65 17.15q-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-.49 1.96.49q.83.49 1.29 1.39.45.89.45 2.07t-.45 2.07-1.29 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.31M62.54 17V9.36h1.93V17zm-.02-8.73V6.52h1.98v1.75zm-5.96 8.86a2.9 2.9 0 0 1-1.6-.46q-.71-.46-1.12-1.33-.41-.88-.41-2.15 0-1.29.42-2.17.42-.87 1.13-1.32a2.9 2.9 0 0 1 1.57-.44q.66 0 1.09.23.43.22.69.54.27.32.4.61h.07V6.81h1.92V17h-1.89v-1.22h-.1a2.8 2.8 0 0 1-.4.61q-.27.31-.7.53-.43.21-1.07.21m.56-1.55q.55 0 .94-.3.38-.3.58-.84a3.5 3.5 0 0 0 .21-1.25q0-.72-.2-1.25t-.59-.83q-.38-.29-.94-.29-.57 0-.95.31a1.85 1.85 0 0 0-.58.83 3.6 3.6 0 0 0-.19 1.22q0 .69.19 1.23.2.54.58.85.39.31.95.31m-9.39 1.53q-.79 0-1.39-.34a2.34 2.34 0 0 1-.92-.98q-.33-.65-.33-1.55V9.37h1.93v4.54q0 .75.38 1.16.38.42 1.05.42.46 0 .81-.19.35-.2.55-.57.2-.38.2-.9V9.38h1.93V17h-1.83l-.02-1.9h.12q-.31.98-.93 1.49t-1.56.51m-3.99-7.74v1.48h-4.44V9.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.72 9.61q-1.2 0-2.09-.37t-1.39-1.09q-.5-.73-.53-1.77h1.92q.04.53.32.88t.74.53q.46.17 1.02.17.57 0 1.01-.17.44-.18.68-.49.25-.31.25-.72a.9.9 0 0 0-.22-.62 1.7 1.7 0 0 0-.62-.42 5.3 5.3 0 0 0-.96-.31l-1.13-.29q-1.28-.32-2.01-.99-.72-.67-.72-1.76 0-.91.49-1.59t1.35-1.06 1.94-.38q1.11 0 1.94.38t1.3 1.06q.47.67.49 1.54h-1.9q-.06-.64-.55-.98-.49-.35-1.29-.35a2.5 2.5 0 0 0-.94.17q-.39.16-.6.44a1.06 1.06 0 0 0-.2.64q0 .4.24.66.25.26.63.42.39.16.81.26l.94.23q.61.14 1.15.38.55.24.97.6.42.35.66.84t.24 1.14q0 .91-.46 1.59t-1.33 1.06-2.1.38\"/>\n</svg>\n";
/**
* __StudioLogo__
*
* An internal component to represent the logo for Studio.
*
*/
function StudioLogo(_ref) {
var _ref$size = _ref.size,
size = _ref$size === void 0 ? 'medium' : _ref$size,
_ref$appearance = _ref.appearance,
appearance = _ref$appearance === void 0 ? 'brand' : _ref$appearance,
_ref$label = _ref.label,
label = _ref$label === void 0 ? 'Studio' : _ref$label,
testId = _ref.testId;
return /*#__PURE__*/_react.default.createElement(_logoWrapper.LogoWrapper, {
svg: svg,
label: label,
appearance: appearance,
size: size,
testId: testId
});
}