I need change color of that icon :
I try fill but it not works.
Styles of that icon
import styled from 'styled-components'
export default styled.img`
height: 14px;
padding-right: 7px;
fill: #d85040;
`
And in component :
import google from '../img/google-brands.svg'
<SocialCont>
<SocialLink>
<CompanyLogo src={google} alt="facebook"/>
<SocialText>Google</SocialText>
</SocialLink>
</SocialCont>
I use React and Styled Components.
SVG images are actually just glorified HTML elements.
You can edit your SVG images to set the fill and stroke attributes to anything you want.
You can also give SVG elements id and class attributes and use styled-components to change those.
If it is an svg passed as a source to an image, i.e. <img src="image.svg" /> , it may not be impossible to implement it. It is, however possible if you are injecting the svg code directly into the page.
In this case, simply change the fill attribute on the tags that you want to change the color on.
Since you asked this on the react channel, I'm assuming you're using React. You could simply create a component that returns the SVG so that your code may be cleaner.
Related
I am working on a website made with Gatsby v. 4. On static pages the template expects a background image that takes up slightly less than half the screen. All background images are loaded via the StaticImage component of Gatsby's 'gatsby-plugin-image' plugin.
Is there a way to get this background image by using the height and width (or other) attributes of Gatsby's StaticImage component?
I am currently achieving this through an external .scss style sheet in this way:
img {
height: calc(50vh);
width: calc(300vh);
}
You have exposed an style or imgStyle props in both: StaticImage as well as GatsbyImage.
style: Inline styles applied to the outer wrapper.
imgStyle: Inline styles applied to the <img> element.
Source: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/#shared-props
Depending on how's your JSX structure you may want to use one or another but answering your question: yes, there's no need of using an external .scss file, you can use inline styles as desired:
<StaticImage
imgStyle={{ width:"300vh", height:"50vh" }}
style={{ width:"300vh", height:"50vh" }}
/>
Use whichever works better for your scenario.
I know I can use predefined material design (or font awesome etc...) icons in Vuetify like this:
<v-icon>mdi-clock</v-icon>
But is there a way to use v-icon component to display my custom icon defined as svg in my-icon.svg file? This .svg file is located located in my project public/img directory but how can I reference it inside v-icon component?
AFAIK If you want to use as external svg, the answer is unfortunately no.
Anyway, you can import the svg file as a component with vue-svg-loader then use inside v-icon.
import Stack from "#/icons/stack.svg"; // import /src/icons/stack.svg
export default {
components: {
Stack
}
};
Then use it
<v-icon>
<Stack/>
</v-icon>
Another solution How To Add Custom SVG Icon in Vuetify - Vue.
You can achieve the same using CSS.
.v-icon
height 20px
width 20px
&.engine
background-image url(https://www.svgrepo.com/show/9344/train.svg)
background-size contain
background-repeat no-repeat
&::before
visibility hidden
content ""
check out this codepen.
I need to load, display and dynamically change the color of an SVG image in my Angular project by applying different CSS classes to it.
This question didn't help, since it makes use of the Modernizr library and I would like to avoid it. I don't want also to copy the d field in the path tag of the image I have directly in the html file of the Angular project because it would be a wall of text that I'm not willing to accept. I can accept instead the usage of an external dedicated library to achieve the correct outcome, like the ng-inline-svg, which I tried to use the following way:
<div class="svg1" aria-label="My icon"
[inlineSVG]="'./assets/images/icons/ApplyIcon.svg'">
</div>
Defying the following CSS class:
.svg1 {
color: green;
}
It loads the image perfectly as a regular img tag but if I try then to apply a custom class to it to change the image color, it doesn't work.
Furthermore, I tried to use the object tag the following way:
<div class="col-2">
<object
id="svg1"
data="./assets/images/icons/ApplyIcon.svg"
type="image/svg+xml">
</object>
</div>
But, again, if I apply a class to the object tag with the CSS directives color: green; or fill: green; nothing would change. Any idea to achieve what I want?
Use the svg element in component.html file and use [ngClass] directive to dynamically change the inner svg class based on the conditions.
example:
component.ts
data.state = "New" || "In-Progress" || "Completed" // this changes dynamically based on the data
component.html:
<svg <circle class="cls-3" [ngClass] = "{'New': 'blue', 'In-Progress':'orange','Completed':'green'}[data.state]" cx="8.21" cy="8.01" r="2.44" transform="translate(-3.22 8.89) rotate(-48.73)"/></svg> // inner class of svg element
component.css:
.blue {
fill:blue
}
.orange{
fill: orange
}
.green {
fill: green
}
I tried different ways to change img src SVG colors finally achieved using SVG as a mask and It's working as expected for me.
Angular HTML:
<div class="icon" [ngStyle]="{'mask': 'url(' + icon + ') no-repeat center', '-webkit-mask': 'url(' + icon + ') no-repeat center'}"></div>
Angular CSS
.icon {
background-color: #0000; // Here you can the svg color
}
In my case, I need to change the color of few paths and circle inside whole SVG element.
This fixed my problem: <svg>... <path [attr.fill] = "<color>" ... /> ...</svg>.
Use the setAttribute() property to change the color of the SVG,
document.getElementById("svg1").setAttribute("fill", "green");
fill: green;
works only for path element which is usually present in svg element.
color property is for font color and it won't work on svg element.
In your scenario you can below things
1) in your folder /assets/images/icons/ApplyIcon.svg edit svg icon and for that path
give attribute fill="green"
2) If you want to use that icon on multiple places with different color then above method
will not work because same color will get applied everywhere. In this case you can simply remove fill="color" from all path inside svg.
and after this you can apply css
fill:color;
In this case although fill:color is not applied on SVG it will traverse to child element path and hence it will work.
I recently faced this same issue and resolved it by generating a new Angular component and using my .svg file in place the the component's .html file.
For instance, updating the template path to point to your .svg, like this: templateUrl: './my-icon.component.svg'. You can then add Angular directives inside the SVG file.
Check out this example: https://levelup.gitconnected.com/using-svg-files-as-component-templates-with-angular-cli-ea58fe79b6c1
The accepted answer is good but then what if you have a bloated SVG?
we first need to transform the SVG or all SVG in the project using #ngneat/svg-icon
if the fill or stroke properties of elements in the SVG are set to currentColor, they will have the color defined for the containing DOM element,. So the color can easily be changed by changing the color style on the svg-icon element.
move your SVGs icons to src/assets/svg directory the run ng add #ngneat/svg-icon
this command installs the svg-icon to your project and automatically generates the svgs into ts files where the svgs are turned to objects containing
the name key : this is the generated name for the svg and will be used to identify the svg
the data key: this is essentially the svg code copied from the svg files
the generated svg can be found on the app/svg directory
looking at the app.module.ts file the SvgIconsModule is imported and it is declared in the #Ngmodule imports.
import all the svg you want to use in the project from the app/svg directory and put it in the array of icons exposed by the SvgIconsModule.
import { SvgIconsModule } from '#ngneat/svg-icon';
import { appMasterCardLogoIcon, appPaypalLogoIcon, appVisaLogoIcon } from './svg';
#NgModule({
...,
imports: [
BrowserModule,
SvgIconsModule.forRoot({
icons: [appApplePayLogoIcon,
appMasterCardLogoIcon,
appPaypalLogoIcon,
appVisaLogoIcon],
})
],
...
})
you can now use the svg-icon tag anywhere in your component, then the attribute key will be the generated name key (used in identifying the svg)
because the fill or stroke property is set to currentColor, we can then use the color attribute on the svg-icon to control the color
we can also add a class to the svg-icon tag and control the styling using ng-class
<svg-icon key={{payment.logoKey}} [ngClass]="{'selected-payment': payment.isSelected}"class="payment-logo"></svg-icon>
I have a react numpad component in my code and I need to change its size, but I cannot modify its CSS, theme or something like that properly.
I've already realized that some style like colors or fonts may be changed in node_modules\react-numpad\build, but omething like size or align I cannot change. Somebody help me, please , after looking to the following template code.
import NumPad from 'react-numpad';
<NumPad.Number
onChange={(value) => { console.log('value', value)}}
label={'Total'}
placeholder={'my placeholder'}
value={100}
decimal={2}
/>
When we click on the component, we get the numpad open. I need this numpad to be something much bigger than the standard one.
Your Numpad is dynamically added to the document.
You can change it's CSS. If you inspect it, you will get a element with MuiPaper-root class, using this class name you can change it's CSS.
.MuiPaper-root{
width: 500px;
height: 500px;
font-size: 25px;
}
If you want to change color of number being displayed you can do this,
.MuiPaper-root .MuiButtonBase-root{
color:blue;
}
Like this you can change CSS for whatever you want.
Note: Don't change any CSS directly in node_modules folder, instead you can override the CSS in your custom CSS file.
I am setting up a project with React JS and want to use auth0 to handle authentication (and maybe some serverless functions).
auth0 provides a nice "seed" project https://github.com/auth0-samples/auth0-react-sample that works basically out of the box.
The code for the main container uses JSX and loads css style from a module file. The module file provides the className classes that are used for styling.
I am extending the bootstrap layout with React-Bootstrap components, and am able to style some components using classNames syntax.
For example, I am styling a Navbar's background color like this:
Appending to the css module file /01-Login/src/views/Main/styles.module.css
.mainNavBar{
background-color: rgb(45, 140, 210);
border-color: rgb(45, 140, 210);
}
Then to the file containing JSX 01-Login/src/views/Main/Container.js
<Navbar className={styles.mainNavBar} fixedTop>
...
</Navbar>
However, when I try to style other inner elements, ie the text color,
I tried:
.mainMenuItem {
color: #fff;
}
And:
<NavItem className={styles.mainMenuItem} eventKey={1} href="#">Link</NavItem>
It doesn't work. I think it is because I don't know how to reach the children of NavItem.
I tried this and variations of it:
.mainMenuItem ul > li > a {
color: #fff;
}
But it just doesn't seem to be the right way to do it, and doesn't work ( though an 'li' item got styled with the color at some point when inspected on the browser, but not the 'a' ...).
Finally, I tried inline styles (see related question Add inline style in reactjs without using JSX) but this seems to suffer from the same inheritance problem.
Thanks so much if you can point me in the right direction as I am confused.
Edit 19/07/2016
Looks like NavItem doesn't get the style elements...
I submitted an issue to react-bootstrap:
https://github.com/react-bootstrap/react-bootstrap/issues/2070
I used inline styles with javascript syntax with Radium instead of passing standard css with the "Classname" attribute.