-
Cách cơ bản: Dùng svg qua thẻ
imghoặc là dùng content của svg trong html -
Cách tiếp cận tiếp theo là chuyển hết svg icon thành một bộ font rồi load bộ font,css đó vào source code, sử dùng bên html chỉ cần thêm class của icon.
- Cách này sẽ có nhược điêm là không convert được icon multilplechrome
-
Cách tiếp theo là chỉ cần chuyển svg thành dataURI rồi dùng trong css, bên html sẽ thêm class icon
- Cũng có một source họ dựng svg dùng với css css.gg nhưng bị giới hạn icon và cách họ xử lý cũng phức tạp.
-
HTML
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { useCallback, useEffect, useState } from "react"; | |
| // Define custom types for SpeechRecognition and SpeechRecognitionEvent | |
| interface ISpeechRecognitionEvent extends Event { | |
| results: SpeechRecognitionResultList; | |
| resultIndex: number; | |
| } | |
| interface ISpeechRecognition extends EventTarget { | |
| lang: string; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| FROM node:18-alpine AS base | |
| # Install dependencies only when needed | |
| FROM base AS deps | |
| # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed. | |
| RUN apk add --no-cache libc6-compat |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // This file polyfills DragEvent for jsdom | |
| // https://github.com/jsdom/jsdom/issues/2913 | |
| // This file is in JS rather than TS, as our jsdom setup files currently need to be in JS | |
| // Good news: DragEvents are almost the same as MouseEvents | |
| (() => { | |
| if (typeof window === 'undefined') { | |
| return; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const pendingFns = {}; | |
| const runOnce = (fn, key) => { | |
| if (!pendingFns[key]) { | |
| pendingFns[key] = new Promise((resolve, reject) => { | |
| fn().then(resolve).catch(reject) | |
| }) | |
| } | |
| return pendingFns[key]; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const Test = lazyLoadHydrate( | |
| () => import('@components/Test/Test'), | |
| true, | |
| () => <div style={{ height: 300 }} />, | |
| ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import * as React from 'react'; | |
| const useIsFirstRender = (): boolean => { | |
| const isFirst = React.useRef(true); | |
| if (isFirst.current) { | |
| isFirst.current = false; | |
| return true; | |
| } else { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import { withErrorBoundary } from 'components/common/MartyErrorBoundary'; | |
| export const ExampleComponent = () => { | |
| return ( | |
| <div> | |
| Component | |
| </div> | |
| ); |
The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS.
This means you have the following choices:
- Use ESM yourself. (preferred)
Useimport foo from 'foo'instead ofconst foo = require('foo')to import the package. You also need to put"type": "module"in your package.json and more. Follow the below guide. - If the package is used in an async context, you could use
await import(…)from CommonJS instead ofrequire(…). - Stay on the existing version of the package until you can move to ESM.