mirror of https://github.com/sveltejs/svelte
33 lines
587 B
33 lines
587 B
<script>
|
|
const emojis = {
|
|
apple: "🍎",
|
|
banana: "🍌",
|
|
carrot: "🥕",
|
|
doughnut: "🍩",
|
|
egg: "🥚"
|
|
}
|
|
|
|
// the name is updated whenever the prop value changes...
|
|
export let name;
|
|
|
|
// ...but the "emoji" variable is fixed upon initialisation of the component
|
|
const emoji = emojis[name];
|
|
</script>
|
|
|
|
<p>
|
|
<span>The emoji for { name } is { emoji }</span>
|
|
</p>
|
|
|
|
<style>
|
|
p {
|
|
margin: 0.8em 0;
|
|
}
|
|
span {
|
|
display: inline-block;
|
|
padding: 0.2em 1em 0.3em;
|
|
text-align: center;
|
|
border-radius: 0.2em;
|
|
background-color: #FFDFD3;
|
|
}
|
|
</style>
|