880bc7a38a
* perf: use a separate icons.svg file This splits icons into inline and non-inline. The inline ones are high priority; the rest go in an icons.svg file. * create SvgIcon.html * determine inlined svgs at build time
87 lines
1.9 KiB
HTML
87 lines
1.9 KiB
HTML
{#if error}
|
|
<SvgIcon className={computedClass} style={svgStyle} href="#fa-user" />
|
|
{:elseif $autoplayGifs}
|
|
<LazyImage
|
|
className={computedClass}
|
|
ariaHidden="true"
|
|
forceSize=true
|
|
alt=""
|
|
src={account.avatar}
|
|
{width}
|
|
{height}
|
|
on:imgLoad="set({loaded: true})"
|
|
on:imgLoadError="set({error: true})" />
|
|
{:else}
|
|
<NonAutoplayImg
|
|
className={computedClass}
|
|
ariaHidden="true"
|
|
alt=""
|
|
src={account.avatar}
|
|
staticSrc={account.avatar_static}
|
|
{width}
|
|
{height}
|
|
{isLink}
|
|
on:imgLoad="set({loaded: true})"
|
|
on:imgLoadError="set({error: true})"
|
|
/>
|
|
{/if}
|
|
<style>
|
|
:global(.avatar) {
|
|
border-radius: 4px;
|
|
background: var(--loading-bg);
|
|
}
|
|
|
|
:global(.avatar.loaded) {
|
|
background: none;
|
|
}
|
|
|
|
:global(svg.avatar) {
|
|
fill: var(--deemphasized-text-color);
|
|
}
|
|
</style>
|
|
<script>
|
|
import { store } from '../_store/store'
|
|
import NonAutoplayImg from './NonAutoplayImg.html'
|
|
import { classname } from '../_utils/classname'
|
|
import LazyImage from './LazyImage.html'
|
|
import SvgIcon from './SvgIcon.html'
|
|
|
|
export default {
|
|
data: () => ({
|
|
className: void 0,
|
|
loaded: false,
|
|
error: void 0,
|
|
isLink: false,
|
|
size: 'medium'
|
|
}),
|
|
store: () => store,
|
|
computed: {
|
|
computedClass: ({ className, loaded }) => (classname(
|
|
'avatar',
|
|
className,
|
|
loaded && 'loaded'
|
|
)),
|
|
width: ({ size, $isMobileSize }) => {
|
|
switch (size) {
|
|
case 'extra-small':
|
|
return 24
|
|
case 'small':
|
|
return 48
|
|
case 'big':
|
|
return $isMobileSize ? 80 : 100
|
|
case 'medium':
|
|
default:
|
|
return 64
|
|
}
|
|
},
|
|
height: ({ width }) => width,
|
|
svgStyle: ({ width, height }) => `width: ${width}px; height: ${height}px;`
|
|
},
|
|
components: {
|
|
NonAutoplayImg,
|
|
LazyImage,
|
|
SvgIcon
|
|
}
|
|
}
|
|
</script>
|