Seeking advice on generating a webfont from SVG icons using webpack, angular2, and typescript. Any suggestions on the best way to achieve this? Struggling to find helpful information online. Please lend a hand!
https://i.sstatic.net/kvClK.png
The code provided does not offer much guidance.
I need to create a webfont for the SVG icon below. Thank you in advance.
I successfully implemented this solution using the webfonts-generator plugin
Step 1:
webpack.common.js
const webfontsGenerator = require('webfonts-generator');
webfontsGenerator({
files: [
'src/icon/search.svg',
'src/icon/error.svg',
'src/icon/warning.svg'
],
dest: 'custom-fonts/',
fontName: 'custom-icons',
html: true,
templateOptions: {
baseClass: 'custom',
classPrefix: 'custom-'
}
}, function(error) {
if (error) {
console.log('Fail!', error);
} else {
console.log('Done!');
}
});
module.exports = {
loaders: [
{
test : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
loader : 'file-loader'
}
]
}
Something.html
<i class="custom custom-search"></i>
Output https://i.sstatic.net/BYDBx.png
Reference:
Looking for a convenient tool to create webfonts from SVG files? Check out https://github.com/FontCustom/fontcustom.
By integrating FontCustom with Vagrant (and possibly Docker), you can establish an efficient and automated process for generating icons seamlessly.
Encountering the following issue: ERROR in src/components/Header.tsx:6:18 TS7031: Binding element 'title' implicitly has an 'any' type. 4 | 5 | 6 | const Header = ({title}) => { | ^^^^^ 7 | return( 8 | ...
How can I arrange items in rows with equal space between them, without a large gap in the last row? <div fxFlex="row wrap" fxLayoutAlign="space-around"> <my-item *ngFor="let item of items"></my-item> </div> Current Issue: htt ...
I've been working on developing a custom validation for ensuring unique values in all tables, but I encountered this error: ERROR [ExceptionsHandler] Cannot read properties of undefined (reading 'getRepository') TypeError: Cannot read proper ...
I have an object structured like this "Stage" : { // -> vaga.stage "ID01" : { // -> stage.code "abeb5220-2003-4b8b-a6d5-853a40ca7d60" : { //candidate "email" : "<a href="/cdn-cgi/l/email-protectio ...
It is commonly understood that declaration files are typically used for libraries rather than projects. However, let's consider a scenario where an existing JavaScript project needs to be migrated to TypeScript by creating d.ts files for each source ...
The potential of TS 2.x @types is intriguing, but I'm struggling to make it work effectively! I'm using Visual Studio 2015 - version 14.0.25431.01 Update 3 My TypeScript version for Visual Studio 2015 is 2.1.4, downloaded from this link The VS ...
implement{ let selection; $(".l_item").click(function(){ selection = this.value; }); console.log(this.selection); } This unique jQuery function retrieves the selected value from the l_item array of lists. After obtaining the value, there ...
My ASP.net application in Visual Studio used to only utilize JavaScript, but now I am looking to incorporate Typescript. While the installation and transpiling process went smoothly, I encountered an issue when attempting to import modules. I decided to u ...
I am currently working on a map application where users can input coordinates (latitude and longitude). I want to add a marker to the map when the "Add Waypoint" button is clicked, but nothing happens. Strangely, entering the values manually into the .ts f ...
I have created an Array of Objects in my Component class as shown below : deskCategories : Array<any>; this.deskCategories = [ { catLabel : 'Tools', catIcon : 'suitcase' }, { ...
I'm currently learning how to use Node.js with Redux and Express. My view has a single tag, keeping it very basic. However, I've encountered an error in my console that I'm struggling to understand: Uncaught ReferenceError: process is not d ...
I'm currently working on an Ionic study app in order to familiarize myself with Docker. I have completed all the necessary steps to create the image: 1. First, I created the Dockerfile with the following scripts: FROM node:18.10.0-alpine3.15 WORKDIR ...
I created a small TS app recently. Inside the project, there is a file named en.js with the following content: export default { name: "test" } However, when I attempt to import it, the import does not work as expected: await import("./e ...
As a newcomer to Typescript, I am facing challenges in properly typing the following code snippet. I have experimented with Interfaces and individually typing properties as well, but it seems like I am only scratching the surface and encountering new typin ...
Recently delving into Angular and attempting to retrieve JSON League Table data from the API, I encountered an error message stating Type 'Promise' is not assignable to type 'LeagueTable'. leaguetable.service.ts import { Injectable } ...
I'm in the process of setting up a vulnerability check for my Angular 7/Node project. Can anyone advise on how to effectively run this type of process? Are there any recommended tools available? Initially, I attempted to use the dependency-check-mave ...
Once I've successfully set up react and react-dom, the next step is to install webpack. However, I encountered an error during this process. To troubleshoot, I decided to install babel-loader first to ensure that both npm and my internet connection a ...
For my current web project, I require a friendship/follow feature. There are two roles involved: admins and regular users. Regular users have the ability to follow other users, while admins do not possess this capability. When a user wishes to follow anot ...
I need to clear my sessionStorage every time I exit my application. App Module: export class AppModule implements OnInit, OnDestroy{ constructor(private overlayService: OverlayService, private logger: LoggerService, private userService: UserService, pr ...
When using Antd, I am having trouble getting errors in the onChange event. Even when there is an error in a field, I cannot see the errors while typing in that particular field. For example; https://stackblitz.com/edit/react-qurm1n?file=demo.tsx Here are ...