Comments (8)
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>
from svelte-awesome.
Can I confirm, did it work in svelte but just not sapper, or did you start using svelte-awesome after you migrated over?
from svelte-awesome.
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.
from svelte-awesome.
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
from svelte-awesome.
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.
from svelte-awesome.
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';
from svelte-awesome.
provisionally closing as sapper is deprecated now over sveltekit
from svelte-awesome.
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);
}
from svelte-awesome.
Related Issues (20)
- Dependency Dashboard
- Does not render SVG in Svelte 5 - requires addition of <svelte:options namespace='svg'/> in Icon.svelte HOT 3
- Demo site not working HOT 2
- "Problems" in vscode HOT 9
- SvelteKit Error HOT 3
- Updated default to v5 of fontawesome HOT 2
- Issue with sveltekit after latest update HOT 4
- Importing icons with "-" HOT 2
- cannot update to 2.4.3 HOT 3
- Hundreds of Network Requests When Importing One Icon HOT 3
- Package breaks HMR in SvelteKit with Tailwind HOT 11
- How to switch icons on click? HOT 1
- Possible to import icons dynamically? HOT 1
- Invalid HTML when using multiple icons HOT 4
- [Suggestion] Improved `externalLink` icon HOT 1
- Stacked icons no longer work? HOT 1
- doesn't work with webpack when using named imports HOT 2
- <Icon> was created with unknown prop 'aria-hidden' HOT 1
- Not sure if duo tones are officially supported HOT 3
- Bug on new install HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svelte-awesome.