fangpenlin / avataaars Goto Github PK
View Code? Open in Web Editor NEWReact component for avataaars
License: MIT License
React component for avataaars
License: MIT License
How do I change the circle background color?
When the Avataaar component displays in Firefox, it's HUGE. Is there a workaround for this?
When the 1st time to change one style of avataaar. the develop tools has a warning message.
but when I change style again , there is no warning.
There is occured when the 1st time page loaded.
Head-export-handler-for-browser.js:72 Warning: Can't perform a React state update on a component that hasn't mounted yet. This indicates that you have a side-effect in your render function that asynchronously later calls tries to update the component. Move this work to useEffect instead.
at Selector (webpack-internal:///./node_modules/avataaars/dist/options/Selector.js:31:47)
at FacialHair (webpack-internal:///./node_modules/avataaars/dist/avatar/top/facialHair/index.js:29:42)
at g
at g
at g
at Hat (webpack-internal:///./node_modules/avataaars/dist/avatar/top/Hat.js:24:47)
at Selector (webpack-internal:///./node_modules/avataaars/dist/options/Selector.js:31:47)
at Top (webpack-internal:///./node_modules/avataaars/dist/avatar/top/index.js:58:42)
at g
at g
at g
at g
at svg
at Avatar (webpack-internal:///./node_modules/avataaars/dist/avatar/index.js:34:47)
at AvatarComponent (webpack-internal:///./node_modules/avataaars/dist/index.js:34:47)
My code show below
import React from 'react'
import { Dialog, DialogTitle, DialogContent, DialogActions, Button, Select, MenuItem, InputLabel, Box } from '@mui/material'
import { useContext } from 'react'
import { ProfileContext } from './ProfileContextProvider'
import { debugLog } from '51cloudclass-utilities/src/utils'
import Avatar, { } from 'avataaars';
const MyAvataaar = () => {
const { topStyle } = useContext(ProfileContext)
return <Avatar
style={{ width: '200px', height: '200px' }
}
avatarStyle='Circle'
topType={topStyle}
// accessoriesType='Prescription02'
hairColor='BrownDark'
facialHairType='Blank'
// clotheType='Hoodie'
// clotheColor='PastelBlue'
eyeType='Happy'
eyebrowType='Default'
mouthType='Smile'
skinColor='Light'
/>
}
const AvataaarDialog = () => {
const { open, closeDialog, topStyle, setTopStyle } = useContext(ProfileContext);
const handleChangeAvataaar = () => {
debugLog("change avataaar")
}
const changeStyle = (e) => {
const target = e.target;
debugLog("name of target: ", target.name);
switch (target.name) {
case "top-style":
setTopStyle(e.target.value);
break;
default:
return
}
}
return (
<Dialog open={open} onClose={closeDialog} >
<DialogTitle>
我们不一样,头像也扮靓
</DialogTitle>
<DialogContent className="flex flex-col gap-2">
<MyAvataaar />
<Box className="w-full flex flex-col gap-2">
<InputLabel id="top-style">发型</InputLabel>
<Select defaultValue='NoHair' size="small" name="top-style" labelId='top-style' value={topStyle} onChange={changeStyle}>
<MenuItem value="NoHair">我佛慈悲</MenuItem>
<MenuItem value="Hat">牛仔帽</MenuItem>
<MenuItem value="LongHairDreads">脏发</MenuItem>
</Select>
</Box>
</DialogContent>
<DialogActions>
<Button
onClick={closeDialog}
color="primary"
>
取消
</Button>
<Button variant="contained" onClick={handleChangeAvataaar}>
更换
</Button>
</DialogActions>
</Dialog>
)
}
export default AvataaarDialog
I see that generator uses quite complicated logic with context to get list of all possible variants for each avatar prop. Is there any reason behind that? Is it possible to get simple object of all possible variants per prop? something like:
{
'facialHairType': ['MoustacheFancy', 'MoustacheMagnum', ...],
'facialHairColor': ['Auburn', 'Black', ...],
...
}
It will simplify creation of custom generators. I can make a PR with hardcoded object if there is not better way to do it.
It would be nice to style the avatar using CSS classes instead of a style object. Should be a simple change to propagate className
to the main div
.
The ability to download a generated SVG or PNG is great, but I'd love to be able to link directly to the SVG or PNG file.
Use case here is generating random avatars for user profiles on a web app.
Basically want to use this app as an API server for generating these and then link to randomly generated images.
example.com/?accessoriesType=Prescription01&avatarStyle=Transparent&clotheColor=Blue01&clotheType=BlazerShirt&eyeType=Hearts&eyebrowType=SadConcerned&facialHairColor=Black&facialHairType=BeardLight&graphicType=Resist&hairColor=Black&mouthType=Smile&skinColor=Light&topType=LongHairMiaWallace.svg
(Note the added .svg
on the end of the URL)
Hi!
Exists som API for this? Should be a great feature!
Thanks!
Is it possible to use this component when importing it as
let Avatars = require('avataaars');
?
I was hoping the following would work
ReactDOM.render(
React.createElement( Avatars, {avatarStyle:'Circle'}, null),
document.getElementById('root')
);
But Avatars is an object and createElement needs a class or function.
export interface Props {
avatarStyle: string;
style?: React.CSSProperties;
topType?: string;
accessoriesType?: string;
hairColor?: string;
facialHairType?: string;
facialHairColor?: string;
clotheType?: string;
clotheColor?: string;
graphicType?: string;
eyeType?: string;
eyebrowType?: string;
mouthType?: string;
skinColor?: string;
pieceType?: string;
pieceSize?: string;
}
I have used the latest version of react17
I made some modifications but I can't seem to know how to build the dist folder.
Thanks!
There is an error in the terminal every time an avatar is rendered. It should be easy to solve since it is just asking to change the used method. This is the error:
Warning: componentWillMount has been renamed, and is not recommended for use. See https://reactjs.org/link/unsafe-component-lifecycles for details.
* Move code from componentWillMount to componentDidMount (preferred in most cases) or the constructor.
And the line it is referring to is this one:
Line 42 in e16cf02
Warning: Legacy context API has been detected within a strict-mode tree.
The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.
Please update the following components: AvatarComponent, Selector
Learn more about this warning here: https://reactjs.org/link/legacy-context
Hey there!
This library looks amazing and I'm about to implement it into a project now. Any chance you'd be interested in having an avatar generated given a seed phrase? It could look something like this:
<Avatar seed="[some-random-string]" />
Any time Avatar
received that seed string it would output the same avatar, similar to the way you can replicate Minecraft worlds by providing it with the same seed phrase upon generation.
Awesome work and thanks for building this!!
npm ERR! react@"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0" from [email protected]
npm ERR! node_modules/avataaars
npm ERR! avataaars@"*" from the root project
Hello,
I'm wondering what the workflow is for adding additional components to this system. I've got the original Avatar Library open in Sketch, but I'm not clear on how to export components into the React Component format used to store the individual elements in this project. Any help would be greatly appreciated!!! Thanks for making this, it's awesome!
I love this library and would like to help porting it to react-native 🎉
@fangpenlin Would you prefer me to create a seperate react-native-avataaar
repo and import the original avataaar
as a dependency or try to work on a pull request so this repo supports both web and react-native (via react-native-svg
)?
Is this a react native library if yes, how can i use it in my android+ ios app..if not, than what is it nd how can i covert it into react native..Thanks in advance✌️
Hey I would like to use a ref to get the HTML from the avatar svg, it would help with the avataaar-generator too because that seems to use ReactDOM to get the node to download. Thanks!
I render multiple avatars in a custom avatar editor and when some of them are removed from the DOM, then the remaining svg does not render well anymore on Safari only.
I have tried the following code (shivam1410/fangpenlin-avataaars-generator-angular#5) but it did not work, on the contrary, it broke the svg:
var svgSel = '#root > div > div > main > main > div > div > div.avatar-main-preview > svg';
document.querySelectorAll(svgSel + ' [mask^="url("]').forEach(node => {
var attributMask = node.getAttribute("mask");
node.setAttribute("mask", + attributMask.replace('url(', 'url(' + location.href));
});
document.querySelectorAll(svgSel + ' [filter^="url("]').forEach(node => {
var attributFilter = node.getAttribute("filter");
node.setAttribute("filter", + attributFilter.replace('url(', 'url(' + location.href));
});
document.querySelectorAll(svgSel + ' [fill^="url("]').forEach(node => {
var attributFill = node.getAttribute("fill");
node.setAttribute("fill", + attributFill.replace('url(', 'url(' + location.href));
});
Could this be because:
My confusion here is:
Thank you!
Hey there
Awesome library ! Thanks for that first !
Now, we'd like to change the shirt color and the logo of the Graphic shirt, is it easily doable?
Cheers
I'm trying to design an UI similar to Google Allo,
where the selector is a grid with the different elements shown as icons.
To render individually the different elements I'd need to be able to do something like
import { BlazerShirt } from 'avataaars/clothes'
Would this be an easy addition? I'm not familiar with TypeScript otherwise I'd attempt a PR.
Thanks.
Here is the desired UI
If the mobile side menu and the body display avatars at the same time, the background is filled with a skinColor square.
When Avatar disappears by folding items in the side menu, the square of body disappears.
This is what happens when they are on a different page.
Hi,
When installing avataaars with npm install avataaars
it includes the npm v6.4.1
package and all of it's dependencies with it - 388 packages.
The npmjs.org
page lists npm
as a dependency, yet the package.json
file in this repo doesn't list it.
What's going on here?
Following docs https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-opacity
fill-opacity attribute has no effect on
As a presentation attribute, it can be applied to any element but it has effect only on the following eleven elements: <altGlyph>, <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref>, and <tspan>
The results (don't be scared ^^):
I will create a PR to avoid this behavior to move fill-opacity to the right element.
Hope this package is still maintained
This is done on [email protected] and [email protected]
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.