svgicon | SVG icon components and tool set | Icon library

I would like to be able to utilize the eslint angular template that checks for i18n tags as shown here https://github.com/angular-eslint/angular-eslint/blob/master/packages/eslint-plugin-template/src/rules/i18n.ts and listed here https://github.com/angular-eslint/angular-eslint#readme, but there isn't really any helpful instruction on how to activate it or what needs to be put in the config to make it work. I just need to know how to turn it "on" to start checking. Any help would be appreciated.

Update:

Here is an example of what I am trying (and failing) at doing:

In .eslintrc.json, I am trying to add @angular-eslint/template/i18n:

I'm trying to create an outlined button with an icon in it

Here's the shortened version of my CSS for styling the SVG:

Hi I'm trying to make a component that loads an svg when used. But the problem is it does not load in the DOM. It always display shadow -root (closed) when I inspect the element.

But it does display when used in image. Reason why I want to use svg than image is I want to be able to change the color.

The inspected element appears as:

I have created a Material-UI persistent drawer in which there is a list item component that aims to change the icon color whenever a user clicks on the list item. But my styling is only working with Material-UI icon, not with external SVG.

Here is codesandbox link for the same project to understand it better.

Here is my AppBarDrawer.js parent component that renders my listItem component. Working fine and can be ignored

I’m helping a friend with her site and everything looks good except for a problem with the nav menu. When viewed on a phone (or just shrinking your browser window), the navbar height expands and the logo drops down leaving too much white space above it and in the process, stealing it from below.

Originally, there wasn’t an “ml-auto” on the button class and the hamburger icon was shown on the left side of the screen directly above the logo. You’d think "navbar-toggler-right" would do the trick, but it doesn’t. Adding ml-auto pushed the icon to the right, but leaves the white space above the logo.

After extensive testing, it appears that the container div is part of the problem. If I place the logo outside the container, the problem goes away. However, without it there is no left margin on the logo on larger screens.

How can I remove that white space above the logo, and have the logo and the hamburger show on the same line? I’m terrible with CSS.

To see it in action, the site is https://italian-getaways.com

Here’s the nav code without the PHP:

I am creating an component library with Preact and TypeScript. I have an icon component which can be used like:

Using "vue-svg-loader" method to the letter in the module's docs, I get this error:

[Vue warn]: Invalid Component definition: data:image/svg+xml;base64,PHN2ZyB3aWR0...

My code is identical to the example.

Any idea why I'm getting such error?

(note that previously I tried to use the code from this answer and didn't get error, however a string "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhl..." was rendered on the page instead of the actual SVG image)

EDIT: below is my template's code, in /components/global/SvgIcon.vue.

c is a Icon fetch by the I/O.

I need SVG path from the c variable, replacing the once.

Here an example is provided how the hard coded Version is basically working.

The viewBox property is from the template by this method.

I'm new to NextJS, Since nextjs has its own router, I wanted to go to a page but the url should be different