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
MySQL 8.0.23 installation and configuration method graphic tutorial under win10
This article shares the installation and configur...
How to enable MySQL remote connection
For security reasons, MySql-Server only allows th...
About dynamically adding routes based on user permissions in Vue
Display different menu pages according to the use...
Implementing a simple calculator with javascript
This article example shares the specific code of ...
js dynamically adds example code for a list of circled numbers
1. Add the ul tag in the body first <!-- Unord...
Implementation steps for setting up the React+Ant Design development environment
Basics 1. Use scaffolding to create a project and...
UDP simple server client code example
I won’t go into details about the theory of UDP. ...
How to use html css to control div or table to be fixed in a specified position
CSS CodeCopy content to clipboard .bottomTable{ b...
How to use CSS3 to implement a queue animation similar to online live broadcast
A friend in the group asked a question before, th...
The core process of nodejs processing tcp connection
A few days ago, I exchanged some knowledge about ...
Docker case analysis: Building a Redis service
Table of contents 1 Create mount directories and ...
HTML Basic Notes (Recommended)
1. Basic structure of web page: XML/HTML CodeCopy...
Summary of MySQL database and table sharding
During project development, our database data is ...
Detailed explanation of docker command to backup linux system
tar backup system sudo tar cvpzf backup.tgz --exc...
4 ways to modify MySQL root password (summary)
Method 1: Use the SET PASSWORD command First log ...