I use the Twemoji library to get emoji icons in my Next js App, they appear as <span><img></span> in the final HTML and I can override their default width and height using !important in my globals.scss file:
.customize { //Parent class containers 3 buttons, each one has an emoji element
top: 88%;
right: calc(50vw - (52.2px + 3rem));
button {
span img[style]{
width: 35px !important;
height: 35px !important;
}
}
}
Then I tried to extract it as a [].module.scss file, everything works but the images don't change size whatsoever. Why?
Edit
Here is the component I'm trying to style:
import ThemeButton from '../components/themeCustomizeButton' // a button that renders an emoji
import LanguageSwitcher from '../components/LanguageSwitch' // a button that renders an emoji
import Complex from '../components/ComplexitySwitch' // a button that renders an emoji
import styles from "../styles/local/components/customize.module.scss" // importing .module.scss
function Customizing() {
return(
<section className={styles.customize}>
<ThemeButton />
<LanguageSwitcher />
<Complex />
</section>
)
}
export default Customizing
Just use this code before wherever you are trying to extract
$(document).ready(function () {
// Set the size of the rendered Emojis
// This can be set to 16x16, 36x36, or 72x72
twemoji.size = '36x36';
});
When debug a webpage, a icon show on page but do not find the class definition! for example, below code use a class "icon icon-md ion-md-power", which libray should include to use this icon. any tutorial is welcome since I am a newbie for web programming!
<ion-icon name="md-power" role="img" class="icon icon-md ion-md-power" aria-label="power"></ion-icon>
ionicons not use CSS to display icon. ionicon have svg icons and get svg content by JavaScript based on ion-icon's attributes. You can learn about the Shadow DOM technology that ionicon uses to display icons in an MDN article.
icon.tsx, utils.ts#getUrl()
loadIcon() {
if (Build.isBrowser && this.isVisible) {
const url = getUrl(this); // <-- get URL of SVG icon! getUrl() declare at utils.ts.
if (url) {
if (ioniconContent.has(url)) {
this.svgContent = ioniconContent.get(url);
} else {
getSvgContent(url).then(() => this.svgContent = ioniconContent.get(url));
}
}
}
I have a list of icons. I want to change the icons colors to white. By default my icons are black.
Any suggestions guys?
I normally use 'fill: white' in my css but now that I am doing this in React... it's not working!
import React from 'react'
import menuIcon from '../img/menu.svg';
import homeIcon from '../img/home.svg';
<ul>
<li>
<a href="/" className="sidebar__link">
<img src={menuIcon} alt="sidebar icon" className="sidebar__icon" />
</a>
</li>
<li>
<a href="/" className="sidebar__link">
<img src={homeIcon} alt="sidebar icon" className="sidebar__icon" />
</a>
</li>
</ul>
.sidebar__icon {
fill: #FFFFF;
width: 3.2rem;
height: 3.2rem;
}
I use this approach to avoid the need of creating a React component for each icon. As the docs say you can import the SVG file as a react component.
import { ReactComponent as Logo } from './logo.svg';
const App = () => (
<div>
{/* Logo is an actual React component */}
<Logo />
</div>
);
If you want to change the fill property you have to set your SVG fill's value to current then you can use it like this:
<svg fill="current" stroke="current" ....> ... </svg>
import { ReactComponent as Logo } from './logo.svg';
const App = () => (
<div>
{/* Logo is an actual React component */}
<Logo fill='red' stroke='green'/>
</div>
);
use your SVG as a component, then all the SVG goodness is accessible:
const MenuIcon = (props) =>(
<svg xmlns="http://www.w3.org/2000/svg" fill={props.fill} className={props.class}></svg>
)
And in your render
<li>
<a href="/" className="sidebar__link">
<MenuIcon fill="white"/>
</a>
</li>
You can change css of svg by accessing g or path.
Starting from create-react-app version 2.0
import React from 'react'
import {ReactComponent as Icon} from './home.svg';
export const Home = () => {
return (
<div className='home'>
<Icon className='home__icon'/>
</div>
);
};
.home__icon g {
fill: #FFFFF;
}
.home__icon path {
stroke: #e5e5e5;
stroke-width: 10px;
}
I found an interesting solution to this problem. Don't know if it works in all cases though...
Okay so I have an svg that import like:
import LockIcon from "../assets/lock.svg"
and then render it as:
<LockIcon color={theme.colors.text.primary} />
and then in lock.svg I just add fill="currentColor" in the svg tag.
Hopefully this can useful for some of you.
If you want to change the color of svg without changing the style of svg or without doing any change in the code of svg itself.
You can change the color of svg as an image also.
This can be done with applying filter property of css.
Change your color to css filter.
For the blue
Hex code = #0000ff
blue to filter: invert(9%) sepia(99%) saturate(5630%) hue-rotate(246deg) brightness(111%) contrast(148%);
code
<img src="path/to/svg"
style={{filter: "invert(9%) sepia(99%) saturate(5630%) hue-rotate(246deg) brightness(111%) contrast(148%)"}}
/>
Reference
In my case, I needed to delete this part of my svg file to make it work:
<style type="text/css">
.st0{fill:#8AC6F4;}
</style>
an then this works
import { ReactComponent as Logo } from './logo.svg';
const App = () => (
<div>
{/* Logo is an actual React component */}
<Logo />
</div>
);
As of React 16.13.1, you can use the SVG directly as a component and pass fill prop to change the colour. Please have a look at the following example:
home.svg
<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path d="M 12 2.0996094 L 1 12 L 4 12 L 4 21 L 11 21 L 11 15 L 13 15 L 13 21 L 20 21 L 20 12 L 23 12 L 12 2.0996094 z M 12 4.7910156 L 18 10.191406 L 18 11 L 18 19 L 15 19 L 15 13 L 9 13 L 9 19 L 6 19 L 6 10.191406 L 12 4.7910156 z"/></svg>
ShowIcon/index.js
import React from 'react';
import HomeIcon from './home.svg';
const ShowIcon = props => {
return (
<HomeIcon fill='#ccc' />
)
}
export default ShowIcon;
However, I noticed after testing with several icons that it doesn't work with all the icons. So, please test it before using.
Make sure the fill attribute of the path tag inside your .svg file is set to "none" otherwise this won't work
<Icon fill="white"/>
I faced the same issue, tried most of the suggestions with no luck.
I solved it in a very simple way... no need to create a component for the SVG image
>>> Only add the wanted color as fill in <path fill='#9d8189' ...></path> in .svg file
I use this approach:
import { ReactComponent as Logo } from './logo.svg';
const App = () => (
<div>
{/* Logo is an actual React component */}
<Logo fill='red' stroke='green'/>
</div>
);
Although you don't have to set colors to current in SVG to make it work.
<svg fill="current" stroke="current" ....> ... </svg>
You can keep some default colors so that you don't have to set them in React component each time you are using the SVG, but only when it's necessary.
<svg fill="#ffffff" stroke="#ffffff" ....> ... </svg>
My suggestion is to use a tool like SVG to font convertor, icomoon is my favorite, create your own custom font library for importing your SVG icons
Props
Change color, font size, etc with CSS for icons
Use in the entire project with a single import
They are providing some free icons/ icons bundle
Cons
Initial learning curve
Properly follow the dimensions, outline etc while creating an SVG icons
Difficult for multicolor icons
trying to use Font Awesome 5 SVG es6 searchPseudoElements
import fontawesome from '#fortawesome/fontawesome';
import solid from '#fortawesome/fontawesome-free-solid';
fontawesome.library.add(solid.faTrashAlt);
works fine with <span class="fas fa-trash-alt"></span>
tried adding
fontawesome.config = {
searchPseudoElements: true,
};
:after {
font-family: 'Font Awesome 5 Free';
content:'\f2ed';
}
but not rendering, any tips?
You need to set the config before you load the main Font awesome package.
As per docs: 'Order matters' block
// Make sure we can use pseudo classes
fontawesome.config = { searchPseudoElements: true };
// Base package
import fontawesome from "#fortawesome/fontawesome";
And don't forget to hide your ::after
I'm stuck on a problem. I am using Kendo MVC and want to display font awesome icon in Grid Custom commands.
I have defined Grid Custom Commands for Edit, Delete, and Detail.
columns.Command(command =>
{
command.Custom("Edit").Action("Edit", "User");
command.Custom("Details").Action("Details", "User");
command.Custom("Delete").Action("Delete", "User");
}
Please review the following screenshot. I want to auto-add the fa fa-edit and other icons using MVC Helper extension method.
It is possible to override the CSS for the edit/details/delete command buttons which gives you the option to apply the same style for all pages or just one, for example:
.k-grid-content .k-button.k-grid-edit::before {
content: "\f044" !important;
}
.k-grid-content .k-button.k-grid-delete::before {
content: "\f1f8" !important;
}
And when grid transitions (after placed into edit mode):
.k-grid-content .k-button.k-grid-update::before {
content: "\f044" !important;
}
.k-grid-content .k-button.k-grid-cancel::before {
content: "\f1f8" !important;
}
Here is the a complete Dojo example and all Font Awesome icons along with their CSS values.