Upgrading to SVG icons from font icons - Eliminate inline formatting

After making the decision to transition from font icons to SVG icons, I used Adobe Illustrator to create my SVGs and exported each individual icon using the following settings:

  • Styling: Inline Style
  • Font: SVG
  • Images: Embed
  • Object IDs: Layer Names
  • Decimal: 2

To generate the SVG icons, I utilized the Icomoon app. However, all of the SVGs ended up with inline fill, stroke, or style properties, which is preventing me from updating the icon colors using CSS.

I'm wondering if I overlooked a setting in Illustrator that allows me to save the SVGs without these properties. Alternatively, do I need to use a tool like Remove SVG Properties to remove them?

If utilizing Remove SVG Properties is the solution, could someone guide me on how to integrate it into my Angular CLI project? I'm still very new to this.

csssvgnpmicons

Answer №1

Absolutely, it is possible.

To change the styling of an SVG using CSS, simply target the specific element and apply the desired properties:

selector {
    fill: green;
    stroke: black;
    /* add any other styles here */
}

I have personally tested this method, and it works effectively.

If necessary, you can also use !important to prioritize the style changes.

An alternative approach to updating inline CSS is through jQuery by utilizing the .css() method.

You can access free icons from the following site (link):

.lnr-heart {
  color: blue;
  font-size: 30px;
  /* For better clarity, stick to sizes that are multiples of 20 since Linearicons follows a 20x20 grid system. */
}

body {
  font-size: 30px;
  font-family: serif;
  color: #blue;
}
<!-- Include the below <link> tag in the <head> section of your HTML document. -->
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">

<!-- To insert the icon: -->
<span class="lnr lnr-heart"></span> lnr-heart

<!--
Quick Reference:
https://linearicons.com/free#cheatsheet
-->

Answer №2

There is a handy online tool available that can automatically convert inline styles for you. If you're an Android developer, check out this resource:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Prevent a div from being displaced by the transform property once it reaches the window's border

Is it possible to prevent the viewer I created using CSS transform from moving when its borders reach the window borders? Should I consider using a different method instead? If you'd like to see the code, you can check it out here. var x=0, y=0 ...

javascriptjquerycssbordertransform

Having trouble applying CSS styles to a class using Material UI withStyle? If you're finding that withStyle isn't working as

Check out this code snippet: import { withStyles, MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; import classNames from 'classnames'; const styles = theme => ({ myGridStyle:{ '&:.my-row-s ...

cssreactjsmaterial-uireact-with-styles

There seems to be an issue with gulp as it is not functioning properly and the version information is

Currently, I am working on a project and have made the decision to utilize gulp for watching and transpiling Typescript files. Below are the steps I followed to set everything up: All of these actions were performed within the main directory of my projec ...

ubuntunpmtypescriptgulp

The Bootstrap 4 card component is a versatile and stylish

Currently working on a display layout using Bootstrap 4, specifically utilizing cards. The issue I'm facing is that the text exceeds the limit of the card, causing it to overflow. Is there a solution to make the text automatically wrap to the bottom ...

javascripthtmlcssbootstrap-4

Angular is unable to eliminate the focus outline from a custom checkbox created with Boostrap

Have you noticed that Angular doesn't blur out the clicked element for some strange reason? Well, I came up with a little 'fix' for it: *:focus { outline: none !important; } It's not a perfect solution because ideally every element sh ...

javascriptjqueryhtmlcssangularjs

Centered scaling of SVG graphics

Lately, I've been exploring ways to make my website's logo fill the entire background in a unique way. The concept is to have the browser viewport gradually "dive" into the center of the logo. In order to achieve this effect, I decided to create ...

jquerysvgjquery-animatescalecenter

Encountering a console error: Prop type validation failed for the `Rating` component with the message that the prop `value` is required but is currently `undefined`

I am encountering a proptype error which is causing an issue with the URL display on my Chrome browser. Instead of showing a proper address, I am seeing the URL as undefined like this: http://localhost:3000/order/undefined Instead of undefined, I should h ...

javascriptnode.jsreactjsmongodbnpm

Is there a way to set the content to be hidden by default in Jquery?

Can anyone advise on how to modify the provided code snippet, sourced from (http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show), so that the element remains hidden by default? <!DOCTYPE html> <html> <head> <scrip ...

javascriptjqueryhtmlcssajax

Expanding the <li> elements to create a wide horizontal navigation menu that fits within a 960 grid layout with 12 columns

I'm having trouble making the individual "li" elements inside the "nav" element stretch to fill a 600px space defined by the class "grid_8" in the HTML. I've tried setting width:100%; for the nav, li { width: 100%;} and various other solutions wi ...

htmlcss

Toggle the display of slide numbers in RMarkdown xaringan / reveal.js presentations

In preparation for a workshop, I am creating HTML slides using the xaringan package in R, which is based on remark.js. These slides are made with RMarkdown, and while this approach has been effective, I have encountered a need to disable slide numbers on s ...

cssrr-markdownreveal.jsxaringan

What is the best way to rotate a cube when it is clicked on?

My current project involves rotating a cube by clicking on buttons either on the cube itself or floating next to it. At the moment, I have them floating for easier testing purposes, but placing them directly on the cube is not an issue. The main issue I&a ...

javascripthtmlcssrotationcube

Switching the background color of a button on click and resetting the color of any previously clicked buttons (a total of 8

I'm struggling to implement a feature where only one button out of a column of 8 should be toggled yellow at a time, while the rest remain default green. Unfortunately, I can't seem to get the function to execute on click, as none of the colors a ...

javascriptcssnode.jsexpressnodemon

I am having trouble getting two similar Javascript codes to function simultaneously

Using a common JavaScript code, I am able to display a div when a certain value is selected. http://jsfiddle.net/FvMYz/ $(function() { $('#craft').change(function(){ $('.colors').hide(); $('#' + $(this ...

javascriptjqueryhtmlcss

Is there a way to import react components from a specific directory without relying on node_modules in a node application that is globally installed?

Received a package that requires global installation and renders user-defined react components. Utilizing babel-register, I set up: require('babel-register')({ presets: [ 'es2015', 'stage-0', &apos ...

node.jsreactjsnpmbabeljsbabel-register

The function is not being called as expected when using `onclick` or `eventListener('click')`

I'm in the process of developing a login form for my website that will offer 2 options - "login" and "signup". The concept is similar to mini tabs and iframe windows. Essentially, I have two divs side by side for "login" and "signup". When the user cl ...

javascripthtmlcss

Enhance the speed of my Tumblr page by using JavaScript for personalized styling tweaks

-- Hey there! Dear Reader, if navigating Tumblr isn't your cup of tea, let me know and I'll provide more detailed instructions! I recently ran into some glitches on my Tumblr page while using the default theme 'Optica'. Whenever I tri ...

javascriptjqueryhtmlcsstumblr

Customize the background image in your Windows 8 app developed with HTML

While working on my app with the grid app template, I placed an image in the images folder. However, when I attempted to change the background image, it didn't seem to take effect. This is the code snippet that I used: HMTL <div id="contenthost" ...

htmlcssvisual-studio-2012windows-store-apps

Triangle Top Megamenu Design

Currently, I am implementing a navbar in bootstrap v4.4.1 that includes a mega menu dropdown feature. In my design, I want to include a triangle at the top of the dropdown menu. While I have managed to add the triangle successfully, I am facing difficulti ...

cssbootstrap-4drop-down-menumegamenu

What is the reason for the difference in width between Bootstrap-5 row and regular div blocks?

My code may seem simple, but I have encountered an issue with it: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99fbf6f6edeaedebf8e9d9acb7abb7a9">[email protected]</a ...

csstwitter-bootstrapbootstrap-5

Delete any unnecessary dependencies from the npm packages.json file

Recently, I took over a react project and noticed that the packages.json file is filled with numerous dependencies, some of which are not being used in the project at all. I'm curious if there's an efficient tool or method available to clean up ...

reactjsnpmnpm-install