Reference SVG images in CSS to support dynamic color switching implementation code
|
When we add an svg image to display, react prompts that the file cannot be found. We can add a declaration of the image type in the global file global.d.ts: For details, see "TypeScript prompts that the resource file cannot be found after referencing it" After the declaration, the reference will not report an error. Then we look at the svg image, which has colors and other settings:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Window_Return</title>
<g id="control" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="window_return">
<rect id="Rectangle-6" fill="#D8D8D8" opacity="0" x="0" y="0" width="24" height="24"></rect>
<path d="M8.35417135,12.9957726 C8.13320936,12.7345458 8,12.3967967 8,12.0279541 C8,11.6586058 8.13357489,11.3204363 8.3550807,11.0590615 L8.3521103,11.0564202 L14.356041,4.51971371 L14.3599873,4.52318728 C14.635253,4.20288524 15.0434555,4 15.4990737,4 C16.3280124,4 17,4.67157288 17,5.5 C17,5.8870199 16.8533375,6.23980607 16.6125263,6.50587693 L16.6210783,6.51340439 L11.5390798,12.0228281 L16.5124905,17.3935277 C16.8121157,17.6677653 17,18.0619548 17,18.5 C17,19.3284271 16.3280124,20 15.4990737,20 C15.0262153,20 14.6044287,19.7814702 14.3293154,19.439953 L8.35278214,12.9970098 L8.35417135,12.9957726 L8.35417135,12.9957726 Z" id="Oval-43-Copy-3" fill="#808080"></path>
</g>
</g>
</svg>Is it possible to display different effects based on an svg? For example, highlight after hover Theoretically, it is feasible to add XML code parsing and then add SVG rendering as a component. After browsing the Internet, I found that most of them are not very practical. Many of them load global images and use them as separate components or caches, which is not suitable. react-inlinesvg I found a pretty good open source, it’s super good, I recommend it! https://github.com/gilbarbara/react-inlinesvg Installation: Add reference: import Add a picture:
import BackPng from '../../../../assets/images/back.svg';
<SVG className="backIcon" src={BackPng} />To set dynamic styles:
&:hover {
path {
fill: #4ecb78;
}
.backContent {
color: #4ecb78;
}
}
&:active {
path {
fill: #2baf57;
}
.backContent {
color: #2baf57;
}
}
This concludes this article about the implementation code for referencing svg images in CSS to support dynamic color switching. For more relevant css svg dynamic color switching content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! |
<<: How to insert video into HTML and make it compatible with all browsers
>>: JavaScript Prototype Details
Recommend
Some issues we should pay attention to when designing a web page
Web design, according to personal preferences and ...
Detailed tutorial on installing qt5.12.8 and environment configuration on ubuntu18.04
environment System: Ubuntu 18.04 Software: qt5.12...
Summarize some general principles of web design and production
<br />Related articles: 9 practical suggesti...
Summary of commonly used CSS encapsulation methods
1. pc-reset PC style initialization /* normalize....
js to achieve drag and drop sorting details
Table of contents 1. Introduction 2. Implementati...
A brief analysis of the game kimono memo problem
Today, after the game was restarted, I found that...
Vue3 implements CSS infinite seamless scrolling effect
This article example shares the specific code of ...
How to make an input text box change length according to its content
First: Copy code The code is as follows: <input...
Detailed explanation of mandatory and implicit conversion of types in JavaScript
Table of contents 1. Implicit conversion Conversi...
js implements simple provincial, municipal and district three-level selection cascade
This article shares the specific code of js to re...
Detailed explanation of mysql user variables and set statement examples
Table of contents 1 Introduction to user variable...
Maven project remote deployment && How to configure database connection using tomcat
one. Remote deployment using tomcat 1.1 Problems ...
How to install Postgres 12 + pgadmin in local Docker (support Apple M1)
Table of contents introduce Support Intel CPU Sup...
How to operate json fields in MySQL
MySQL 5.7.8 introduced the json field. This type ...
Lombok implementation JSR-269
Preface Introduction Lombok is a handy tool, just...