How to implement SVGs with Openlayers 7 in react? - reactjs

I am trying to figure out, how to implement an svg file as Layer in Openlayers with react. I tried Imagelayer and Vectorlayer. The example in the docs from ol doesn`t works for my case. The svg is located below src/assets/example.svg
Anyone who can help me?

Related

When should I use className={`styles["my-class"]`} on my react project?

I'am working with React in a project and we need to use a className={styles["my-class"]} in SCSS, I looked on google to know more about styles, but I didn't found anything.
Can someone help me?
This is the css modules method
You can read about it here
https://github.com/css-modules/css-modules

Styled Componets suggestion not working on react

Can someone help me with styled-components ? I have installed styled-component in my react app . but when i am going to apply styled div the css suggestion or prefixes or css emmet not coming or showing. I have also install intellisence extension on my vs code. if someone having some suggestions or solutions plz net me know.

Why doesn't my svg in react-native show any shadow?

The Problem:
I have a react native project which uses react-native-svg for importing my logos. I created my custom Bottom Tab Bar with react-navigation and it looks like this:
So the problem is just I exported my svg when it looks like this in my adobe xd file (just the purple button):
So you can see, there is clearly a shadow but not in my project. What am I doing wrong?
I use the component like this:
import Logo from "../assets/icons/add_icon.svg"
And then render it with <Logo />
Here is the svg (btw when I open it with browser it shows the shadow): https://pastebin.com/w9YZysgS
Why is there no shadow in my app? (also shadow styles won't work when applied directly).
Specs:
Android
Windows
React-Native 0.62 (latest)
Thank you very much in advance
This is not really a coding fix, but before you could make the shadow a radial gradient object of the same shape as opposed to a shadow in the design.

Custom Fonts React Native Expo - separated fonts file

I am newbie with React Native and Expo and I am just wondering how to deal with custom fonts if I want to load it separated from the App.js? I have all font settings separated in fonts.js file and would love to load custom font there and load it for the whole app.If anyone knows how to tackle this problem please do let me know. Thanks
Here is screenshot of my file structure:
https://dev-to-uploads.s3.amazonaws.com/i/00c41lecmtjk2g6ygtvm.png

Integrate react-fontawesome on nextjs

I use nextjs with JSS to styling my components. I want to be able to add react-fontawesome inside my project but I encoutered a problem to integrate the library functionnality.
I tried differents way to implement it but any of them work. Here a codesandbox with my code - https://codesandbox.io/s/v6pyxp00w0
The preview render of codesandbox seems break but all the code are on here.
When I run my code, this error message is display on client and server consoles:
Could not find icon { prefix: 'fas', iconName: 'facebook' }
Do you think I should call the library function inside my app.js file instead of my document.js? Have you an idea to fix my problem?
Thanks you very much!

Resources