CSS font-size does not work for sapper app icons.

[wenwuwu]

Hello,

I am building an app using Sapper and Font-awesome Icon Pro, and of course svelte-awesome.
I encountered a problem that setting font-size on Icons does not work (after I migrated my code from svelte to sapper)

It might be a problem with Font-awesome icons. I checked @fort-awesome source code in Node_modules folder, and there is no source code but only compiled code ( not sure if there is the cause )

[wenwuwu]

Here is my component's source code :

<script>
    import { createEventDispatcher } from 'svelte';
    import Icon from 'svelte-awesome/components/Icon.svelte';
    import { faTimesCircle } from '@fortawesome/pro-solid-svg-icons';

    export let hideIconClear = false;
    export let editing = false;

    const dispatch = createEventDispatcher();

    function clear () {
        sendMsg('clear', true);
    }
	function sendMsg (type, value) {
        let obj = {};
        obj[type] = value;

		dispatch('message', obj);
	}
</script>

<div class="text-box-wrap" class:editing>
    <div class="left">
        <slot />
    </div> 
    <div class="menu-wrap" class:hideIconClear on:click={clear}>
        <div class="bg"></div>
        <div class="clear">
            <Icon data={faTimesCircle} />
        </div> 
    </div> 
</div> 

<style>
    .text-box-wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 100%;
        height: 100%;
        border: 1px dashed transparent;
    }
    .left {
        width: 100%;
        height: 100%;
    }
    .menu-wrap {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 20px;
        width: 20px;
        display: none;
        justify-content: space-between;
        align-items: center;
        z-index: 10;
    }
    .text-box-wrap:hover {
        border-color: #c4c4c4;
    }
    .text-box-wrap.editing {
        border-color: #666;
    }
    .text-box-wrap:hover .menu-wrap:not(.hideIconClear) {
        display: flex;
    }
    .bg {
        position: absolute;
        top: 0;
        right: 0;
        width: 30px;
        height: 100%;
        pointer-events: none;
        background: #f5f6f8;
        z-index: -1;
    }
    .clear {
        font-size: 13px;
        color: #c4c4c4;
        cursor: pointer;
    }
    .clear:hover {
        color: #777;
    }
</style>

[RobBrazier]

Can I confirm, did it work in svelte but just not sapper, or did you start using svelte-awesome after you migrated over?

[wenwuwu]

Can I confirm, did it work in svelte but just not sapper, or did you start using svelte-awesome after you migrated over?

I just tried to use svelte-awesome in my svelte app (Before I was using fontawesome-svelte), it has the same problem: font-size does not work. This happens both in svelte and sapper.

[RobBrazier]

Okay thanks. It could be because it's a SVG that is being rendered, not actually a font, but I'll investigate if there is something that can be done.

Could you try using scale in place of font-size? See https://robbrazier.github.io/svelte-awesome/ for an example. This will let you adjust the size

[wenwuwu]

Thanks a lot. Actually setting width and height on svg element directly still works. But I would like to keep it consistent between svelte and sapper, and keep on using font-size when using fontawesome icons (and for my old projects) . It will help a lot if font-size works as usually. thanks again for investigation.

[benmccann]

Sapper's basically EOL at this point. I'd recommend using SvelteKit. It works for me on the latest SvelteKit now. I don't have to do the Sapper workaround either and can just do import Icon from 'svelte-awesome';

[RobBrazier]

provisionally closing as sapper is deprecated now over sveltekit

[Raynard87645]

You can add a root style and import into main icon div by add style attribute to div
:root {
--color: #000;
}
.main {
color: var(--color);
}