react-celebrity-avatars
Version:
SVG-based React Celebrity Avatar components
68 lines (59 loc) • 13.2 kB
JavaScript
import React from 'react';
function styleInject(css, ref) {
if (ref === void 0) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') {
return;
}
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z = "[data-size=\"1\"] svg {\n font-size: 1rem;\n}\n\n[data-size=\"2\"] svg {\n font-size: 2rem;\n}\n\n[data-size=\"3\"] svg {\n font-size: 3rem;\n}\n\n[data-size=\"4\"] svg {\n font-size: 4rem;\n}\n\n[data-size=\"5\"] svg {\n font-size: 5rem;\n}\n\n[data-size=\"6\"] svg {\n font-size: 6rem;\n}\n\n[data-size=\"7\"] svg {\n font-size: 7rem;\n}\n\n[data-size=\"8\"] svg {\n font-size: 8rem;\n}\n\n[data-size=\"9\"] svg {\n font-size: 9rem;\n}\n\n[data-size=\"10\"] svg {\n font-size: 10rem;\n}\n\n[data-size=\"11\"] svg {\n font-size: 11rem;\n}\n\n[data-size=\"12\"] svg {\n font-size: 12rem;\n}\n\n[data-size=\"13\"] svg {\n font-size: 13rem;\n}\n\n[data-size=\"14\"] svg {\n font-size: 14rem;\n}\n\n[data-size=\"15\"] svg {\n font-size: 15rem;\n}\n\n[data-size=\"16\"] svg {\n font-size: 16rem;\n}\n\n[data-size=\"17\"] svg {\n font-size: 17rem;\n}\n\n[data-size=\"18\"] svg {\n font-size: 18rem;\n}\n\n[data-size=\"19\"] svg {\n font-size: 19rem;\n}\n\n[data-size=\"20\"] svg {\n font-size: 20rem;\n}\n\n[data-size=\"21\"] svg {\n font-size: 21rem;\n}\n\n[data-size=\"22\"] svg {\n font-size: 22rem;\n}\n\n[data-size=\"23\"] svg {\n font-size: 23rem;\n}\n\n[data-size=\"24\"] svg {\n font-size: 24rem;\n}\n\n.rca-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 5px;\n position: relative;\n}\n\n[data-size] svg {\n font-size: 1 rem;\n}\n\n[data-size=true] svg {\n font-size: 1 rem;\n}\n\n[data-theme] {\n background: attr(theme);\n background: white;\n}\n[data-theme=true] {\n background: white;\n}\n\n[data-theme=dark] {\n background: #000000;\n}\n\n[data-theme=light] {\n background: #ffffff;\n}\n\n[data-theme=lavender] {\n background: #9287ff;\n}\n\n[data-theme=turquoise] {\n background: #6bd9e9;\n}\n\n[data-theme=pink] {\n background: #fc909f;\n}\n\n[data-theme=sandstorm] {\n background: #f4d150;\n}\n\n[data-theme=blue] {\n background: #e0ddff;\n}\n\n[data-theme=lily] {\n background: #d2eff3;\n}\n\n[data-theme=pearl] {\n background: #ffedef;\n}\n\n[data-theme=tan] {\n background: #ffeba4;\n}\n\n[data-theme=marine] {\n background: #506af4;\n}\n\n[data-theme=orange] {\n background: #f48150;\n}\n\n[data-theme=fresh] {\n background: #74d153;\n}\n\n[data-theme=hosanna] {\n background: linear-gradient(45deg, #ffafbd 0%, #ffc3a0 100%);\n}\n\n[data-theme=dreamy] {\n background: linear-gradient(45deg, #2193b0 0%, #6dd5ed 100%);\n}\n\n[data-theme=love] {\n background: linear-gradient(45deg, #cc2b5e 0%, #753a88 100%);\n}\n\n[data-theme=piglet] {\n background: linear-gradient(90deg, #ee9ca7 0%, #ffdde1 100%);\n}\n\n[data-theme=mauve] {\n background: linear-gradient(45deg, #42275a 0%, #734b6d 100%);\n}\n\n[data-theme=shades] {\n background: linear-gradient(45deg, #bdc3c7 0%, #2c3e50 100%);\n}\n\n[data-theme=memory] {\n background: linear-gradient(45deg, #de6262 0%, #ffb88c 100%);\n}\n\n[data-theme=social] {\n background: linear-gradient(45deg, #06beb6 0%, #48b1bf 100%);\n}\n\n[data-theme=cherry] {\n background: linear-gradient(45deg, #eb3349 0%, #f45c43 100%);\n}\n\n[data-theme=insta] {\n background: radial-gradient(hsla(0deg, 0%, 0%, 0.15) 60%, transparent 0), radial-gradient(white 65%, transparent 0), linear-gradient(to top right, orange, deeppink);\n}\n\n[data-border-theme] {\n border-color: 2px solid attr(border-theme);\n border-color: 2px solid white;\n}\n[data-border-theme=true] {\n border: 2px solid white;\n}\n\n[data-border-theme=dark] {\n border: 2px solid #000000;\n}\n\n[data-border-theme=light] {\n border: 2px solid #ffffff;\n}\n\n[data-border-theme=lavender] {\n border: 2px solid #9287ff;\n}\n\n[data-border-theme=turquoise] {\n border: 2px solid #6bd9e9;\n}\n\n[data-border-theme=pink] {\n border: 2px solid #fc909f;\n}\n\n[data-border-theme=sandstorm] {\n border: 2px solid #f4d150;\n}\n\n[data-border-theme=blue] {\n border: 2px solid #e0ddff;\n}\n\n[data-border-theme=lily] {\n border: 2px solid #d2eff3;\n}\n\n[data-border-theme=pearl] {\n border: 2px solid #ffedef;\n}\n\n[data-border-theme=tan] {\n border: 2px solid #ffeba4;\n}\n\n[data-border-theme=marine] {\n border: 2px solid #506af4;\n}\n\n[data-border-theme=orange] {\n border: 2px solid #f48150;\n}\n\n[data-border-theme=fresh] {\n border: 2px solid #74d153;\n}\n\n[data-shape] {\n border-radius: 100%;\n}\n\n[data-shape=true] {\n border-radius: 100%;\n}\n\n[data-shape=circle] {\n border-radius: 100%;\n}\n\n[data-shape=rounded] {\n border-radius: 6px;\n}\n\n[data-shape=square] {\n border-radius: 0;\n}\n\n[data-status=true]::after {\n content: \"\";\n top: -5px;\n position: absolute;\n right: 0;\n border-radius: 100%;\n height: 8px;\n width: 8px;\n background-color: #74d153;\n}\n\n[data-status=busy]::after {\n content: \"\";\n top: -5px;\n position: absolute;\n right: 0;\n border-radius: 100%;\n height: 8px;\n width: 8px;\n background-color: #ff4136;\n}\n\n[data-status=online]::after {\n content: \"\";\n top: -5px;\n position: absolute;\n right: 0;\n border-radius: 100%;\n height: 8px;\n width: 8px;\n background-color: #74d153;\n}";
styleInject(css_248z);
const SvgMohanlal = props => /*#__PURE__*/React.createElement("div", {
class: "rca-wrapper ".concat(props.className),
"data-theme": "".concat(props.theme),
"data-shape": "".concat(props.shape),
"data-size": "".concat(props.size),
"data-status": "".concat(props.status),
"data-border-theme": "".concat(props.borderTheme),
title: "".concat(props.title)
}, /*#__PURE__*/React.createElement("svg", {
width: "1em",
height: "1em",
viewBox: "0 0 46 44",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
class: "rca-avatar"
}, /*#__PURE__*/React.createElement("path", {
d: "M3.53461 32.9138C3.47147 32.1946 3.09122 31.4449 2.90601 30.7413C2.46103 29.0508 2.33621 27.4464 3.06818 25.8214C3.29839 25.3103 3.55472 24.4229 4.10946 24.1743C4.34459 24.0689 4.57124 24.2137 4.74668 24.3654C4.90277 24.5004 5.13044 24.7078 5.15387 24.9268C5.20424 25.3989 4.53236 25.8532 4.7862 26.3761C4.91427 26.6399 5.36564 26.4728 5.5776 26.4357C6.01856 26.3586 6.40558 26.4516 6.66485 26.8446C7.38289 27.9332 6.2657 29.2105 6.49342 30.358C6.59915 30.8908 7.44233 31.703 7.98263 31.2248C8.31941 30.9267 8.4287 30.3319 8.51413 29.9107C8.74403 28.7774 8.64877 27.5828 8.92777 26.4603C9.444 24.3837 11.3947 22.977 11.883 20.9014C12.5059 18.2539 9.82221 15.592 11.7581 13.17C12.0929 12.7511 12.4845 12.3809 12.9196 12.0676C13.4401 11.6927 14.0313 11.3696 14.6433 11.173C16.1777 10.6803 17.7872 10.7351 19.24 11.4621C20.4063 12.0456 21.4324 12.9606 22.6876 13.3599C23.2102 13.5261 23.8007 13.5946 24.3475 13.5425C24.853 13.4944 25.4138 13.3217 25.8772 13.6176C26.2802 13.875 26.4557 14.4022 26.7428 14.7674C27.2063 15.357 27.8055 15.7912 28.4973 16.0706C29.0804 16.3061 29.7834 16.4282 30.4126 16.4282C30.7124 16.4282 31.0065 16.3453 31.3064 16.3759C32.3751 16.4854 33.6368 17.123 34.2365 18.0261C34.946 19.0947 34.5605 20.2102 34.0976 21.2848C33.8136 21.944 33.4603 22.7861 33.6299 23.5211C33.8069 24.288 34.8922 24.1795 35.2008 23.585C34.8337 23.6304 34.2023 23.6145 34.2425 23.0738C34.2734 22.6566 34.5956 22.2388 34.7532 21.8598C35.2366 20.6971 35.6472 19.4251 35.4645 18.1539C35.3853 17.6032 35.1582 16.9379 34.6262 16.6843V16.5565C36.1444 16.195 36.5473 18.3281 36.472 19.4318C36.4502 19.7539 36.3915 20.0647 36.4196 20.3902C36.4336 20.5478 36.4713 20.6898 36.5741 20.8135C36.6628 20.9204 36.8416 21.0041 36.8384 21.1636C36.8352 21.3623 36.6099 21.508 36.4841 21.6313C36.3219 21.7909 36.2147 21.9541 36.1693 22.1793C36.0563 22.7415 35.9325 23.6676 36.5415 23.9684C36.5403 23.4869 36.2402 22.8085 36.5249 22.3737C37.0817 21.5248 37.8625 22.6382 37.8529 23.2655C37.8446 23.8154 37.4941 24.2701 37.4417 24.799C37.4047 25.1799 37.4558 25.5673 37.4296 25.9492C37.3077 27.7325 37.3453 29.5309 37.2464 31.3164C37.2298 31.6141 37.2049 31.9196 37.1366 32.2109C36.991 32.8324 36.6852 33.6161 37.4353 34C37.4654 33.2963 37.6371 32.5961 37.685 31.8914C37.7341 31.1726 37.6582 30.489 37.563 29.7829C38.2781 29.9486 38.852 30.303 39.606 30.2938C40.171 30.2869 40.4947 30.1154 40.4998 29.5273C39.8327 29.686 39.0882 30.5776 38.4817 29.844C38.4032 29.749 38.3432 29.6411 38.296 29.5274C38.2359 29.3809 38.2149 29.2361 38.2015 29.08C38.8597 29.0746 39.7758 29.0264 40.3057 28.599C41.4287 27.6938 41.1734 25.9241 42.2874 25.0124C43.3491 24.144 44.9331 25.5926 45.7682 24.2237C45.8524 24.086 45.9201 23.9343 45.9565 23.7767C46.0274 23.4705 45.9903 23.1306 45.9903 22.8183C45.5485 23.2799 45.3251 23.8972 44.7135 24.1893C43.9256 24.5656 42.7177 24.1072 42.908 23.0738C43.1059 21.9962 44.384 21.5154 44.3279 20.3263C44.2755 19.2226 43.1104 18.544 42.8295 17.5149C42.6239 16.7612 42.9954 16.0303 43.0478 15.2786C43.1302 14.1064 42.6047 12.8019 41.8859 11.8921C41.5826 11.5076 41.2308 11.1496 40.7552 10.9976C41.0438 10.913 41.2915 10.9827 41.5852 10.9951C42.3519 11.0274 43.5068 10.9072 43.7686 10.0391C43.8369 9.81307 43.8197 9.56957 43.8197 9.33628C43.6224 9.70471 43.6052 10.1322 43.1812 10.3472C42.8486 10.5157 42.38 10.3622 42.0321 10.312C41.0163 10.1655 39.9335 10.1233 39.17 9.33053C38.3062 8.43299 38.0751 7.16588 36.9246 6.51695C36.3692 6.20386 35.7445 6.13914 35.137 5.98981C34.0887 5.73219 33.0505 5.43692 32.1364 4.84154C31.3852 4.35229 30.7907 3.7012 30.1572 3.07476C29.7074 2.62992 29.1335 2.10438 28.4973 1.95819C27.4325 1.7136 26.4355 2.25409 25.4328 2.50616C24.7639 2.67427 24.1115 2.66283 23.4537 2.45178C21.3478 1.77621 19.761 -0.211388 17.3886 0.0183809C15.3342 0.217352 14.0438 2.10087 12.345 3.04646C11.8081 3.3453 11.1729 3.51034 10.5574 3.51034C9.78205 3.51034 8.98765 3.31917 8.25901 3.70229C7.67836 4.00758 7.49206 4.61011 7.27429 5.18307C7.01247 5.87186 6.72486 6.59101 6.25018 7.16358C5.33691 8.26539 3.8071 8.41587 3.00465 9.65576C2.40791 10.5779 2.04298 11.7756 1.84762 12.8505C1.7834 13.2037 1.67391 13.5755 1.6898 13.9368C1.73187 14.8923 2.21638 15.851 2.03634 16.8121C1.79189 18.1176 0.427175 18.8239 0.0736119 20.0708C-0.101446 20.6879 0.0293056 21.4059 0.534944 21.8171C0.904213 22.1173 1.67378 22.4602 1.70078 23.01C1.72134 23.4274 1.23933 23.7676 0.981846 24.0323C0.567887 24.4578 0.262779 24.962 0.220515 25.5658C0.0865718 27.4763 1.76801 28.4395 2.53489 29.9746C2.95026 30.806 2.5815 31.6102 2.71831 32.4662C2.79052 32.9182 3.14747 32.9822 3.53461 32.9138Z",
fill: "black"
}), /*#__PURE__*/React.createElement("path", {
d: "M26.2308 23.3653L26 23.5157C26.796 23.811 28.0968 24.1636 29 23.9168C28.9171 23.7466 28.7708 23.5953 28.7692 23.4154C28.348 23.3276 27.9472 23.1789 27.5316 23.1005C27.1783 23.0338 26.7511 23.0385 26.385 23.0045C25.9333 22.9624 25.9317 23.228 26.2308 23.3653Z",
fill: "black"
}), /*#__PURE__*/React.createElement("path", {
d: "M15 25.9505C15.8221 25.3408 16.6416 24.648 17.7027 25.0861C18.0616 25.2343 18.3092 25.628 18.6241 25.8599C19.4698 26.4828 20.4468 26.801 21.4496 26.9501C21.9197 27.02 22.421 27.079 22.787 26.6693C23.1926 26.2151 22.9789 25.0706 22.4825 24.7629C22.214 24.5965 21.8586 24.7168 21.5725 24.7387C21.2542 24.7631 20.9034 24.6804 20.5897 24.623C20.2617 24.5631 19.9277 24.4934 19.6069 24.3982C18.1993 23.9807 16.0566 23.4941 15.2042 25.2175C15.0876 25.4532 15.0215 25.6854 15 25.9505Z",
fill: "black"
}), /*#__PURE__*/React.createElement("path", {
d: "M35.9287 27.6821C36.0179 27.513 36.0052 27.3086 35.9867 27.1257C35.972 26.9863 35.9262 26.8504 35.8592 26.7211C35.2795 25.6018 33.2826 26.3322 32.1689 26.2611C31.6316 26.2268 30.8546 25.8357 30.3354 26.0796C30.1243 26.1787 30.0979 26.3955 30.0609 26.5693C29.9722 26.9859 29.8895 27.7532 30.513 27.9481C30.9259 28.0771 31.4549 27.9374 31.8503 27.8338C32.6303 27.6295 33.403 27.3734 34.2081 27.2376C34.8937 27.1219 35.546 27.1612 35.9287 27.6821Z",
fill: "black"
}), /*#__PURE__*/React.createElement("path", {
d: "M15 41.0329C15.2134 41.8952 16.3957 42.4927 17.2164 42.719C19.361 43.3102 21.5892 42.7226 23.597 41.9488C24.0811 41.7623 24.5407 41.5294 25.0075 41.3069C25.2767 41.1785 25.569 41.0188 25.8806 41.0567C26.544 41.1374 27.0773 41.849 27.5597 42.2407C28.482 42.9896 29.5674 43.7599 30.7836 43.9701C31.9363 44.1692 32.8862 43.3489 33 42.2584C32.3196 42.38 32.1348 41.7525 31.8445 41.2909C31.365 40.5282 30.7386 39.7749 29.9104 39.3424C28.6134 38.665 27.4764 39.5046 26.1493 39.3372C25.3315 39.2339 24.723 38.7005 24 38.3742C23.322 38.0681 22.592 37.9847 21.8507 38.0022C20.6089 38.0314 19.296 38.6296 18.3582 39.384C17.3919 40.1615 16.374 41.2779 15 41.0329Z",
fill: "black"
})));
export { SvgMohanlal as Mohanlal };