I am using Svelte Material UI and very new to Svelte.
I understand that I can choose the size?: 'normal' | 'mini' | 'button';
I need to have a very big button.
<script>
import IconButton, { Icon } from '@smui/icon-button';
import { mdiPlusCircle } from '@mdi/js';
import { Svg } from '@smui/common';
</script>
<div class="container">
<div class="new-request">
<div>
<IconButton class="material-icons" size="normal">
<Icon component={Svg} viewBox="0 0 24 24">
<path fill="currentColor" d={mdiPlusCircle} />
</Icon>
</IconButton>
</div>
<div class="mdc-typography--overline" style="font-size:1.8rem;">New request</div>
</div>
</div>
<style>
.container {
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
margin: auto;
height: 100%;
}
.new-request {
display: flex;
flex-direction: column;
align-items: center;
}
</style>
You just need to add some CSS. Worth noting points:
IconButton
isn't picked up by Svelte compiler and scoped, you'll need to use :global(...)
here.<IconButton id="xl-button" ...>
to raise selector specificity, so that my CSS rules can override those included in MUI.--unit: <number>px;
to scale all those parts.:global(#xl-button) {
--unit: 40px; # <- tune the number as you like
padding: var(--unit);
height: calc(4 * var(--unit));
width: calc(4 * var(--unit));
}
:global(#xl-button svg) {
width: calc(2 * var(--unit));
height: calc(2 * var(--unit));
}
Open up https://svelte.dev/repl/ and copy-paste below snippet to see it live.
<script>
import IconButton, { Icon } from "@smui/icon-button";
import { mdiPlusCircle } from "@mdi/js";
import { Svg } from "@smui/common";
</script>
<svelte:head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/bare.min.css"
/>
<!-- Material Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<!-- Roboto -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700"
/>
<!-- Roboto Mono -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono" />
</svelte:head>
<div class="container">
<div class="new-request">
<IconButton class="material-icons" id="xl-button" size="mini">
<Icon component="{Svg}" viewBox="0 0 24 24">
<path fill="currentColor" d="{mdiPlusCircle}" />
</Icon>
</IconButton>
<div class="mdc-typography--overline" style="font-size: 1.8rem">New request</div>
</div>
</div>
<style>
:global(#xl-button) {
--unit: 40px;
padding: var(--unit);
height: calc(4 * var(--unit));
width: calc(4 * var(--unit));
}
:global(#xl-button svg) {
width: calc(2 * var(--unit));
height: calc(2 * var(--unit));
}
.container {
display: flex;
flex-direction: column;
place-items: center;
}
.new-request {
display: flex;
flex-direction: column;
align-items: center;
}
</style>