I have just created a PoC for fun but I think I ended up doing it the most complicated way possible.
Easiest solution would just be to have an extension set the user avatarUrl property to their hosted service. Only needs a few lines of PHP and no frontend changes.
Another solution would be to generate the SVG server-side or client-side, and set the avatar as the data URL of the file. It's not really practical server-side since it's not available as a PHP package, but it could be done client-side.
The most complicated solution (at the moment at least) is to replace the avatar component in the single page app because Flarum doesn't really make it extendable. I mostly managed it, I'll see if I can publish this somehow. The biggest benefit of this solution is that the SVG could potentially be animated or somehow react to the page 👀
EDIT: this is the code for the easiest solution. This can be added to the root extend.php.
Only downside is that the user profile shows the "Remove" button because it believes the user already has an avatar. But this doesn't create any issue, the button just does nothing.
(new Extend\ApiSerializer(\Flarum\Api\Serializer\BasicUserSerializer::class))
->attributes(function ($serializer, $user, $attributes): array {
if ($attributes['avatarUrl']) {
return [];
}
return [
'avatarUrl' => 'https://source.boringavatars.com/beam/100/' . urlencode($user->display_name) . '?colors=264653,2a9d8f,e9c46a,f4a261,e76f51',
];
}),
If you want to force everyone to have this avatar, remove the 3 lines of the if (this means even users with avatars will have their avatars overridden) and use CSS to hide the avatar change controls (to prevent confusion).
