如何将图标从 SVG 更改为 IMG？

【问题标题】：How can i change icons from SVG to IMG?如何将图标从 SVG 更改为 IMG？
【发布时间】：2020-08-16 14:00:57
【问题描述】：

有人可以帮我将图标从 SVG 更改为 PNG 图像或链接吗？

我这里有这段代码：

<?php if ($wo['config']['second_post_button'] == 'reaction') { ?>
	<!-- reaction -->
	<?php if ( isset($wo['story']['viewmode']) && $wo['story']['viewmode'] == 'lightbox') { ?>
    <div class="wo-reaction wo-reaction-lightbox stat-item unselectable" data-id="<?php echo $wo['story']['id']; ?>">
		<span class="like-btn like-btn-lightbox unselectable" data-id="<?php echo $wo['story']['id']; ?>" >
			<?php
				if ($wo['loggedin'] && Wo_IsReacted($wo['story']['id'], $wo['user']['user_id']) === true) {    
					echo Wo_GetReactedTextIcon($wo['story']['id'], $wo['user']['user_id']);
				} else {   
					echo '<span class="status-reaction-'.$wo['story']['id'].' unselectable"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-thumbs-up"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path></svg> <span class="t_likes'.$wo['story']['id'].'"></span> ' . $wo['lang']['like'] . '</span>';   
				}    
			?>
		</span>
		<ul class="reactions-box reactions-lightbox-container-<?php echo $wo['story']['id']; ?> unselectable" data-id="<?php echo $wo['story']['id']; ?>" style="<?php if ($wo['language_type'] == 'rtl') {?> left: auto; <?php }else{ ?> right: auto; <?php }?>">

			<?php if (!empty($wo['reactions_types'])) {
			    foreach ($wo['reactions_types'] as $key => $value) {
			    	if ($value['status'] == 1) {
			    		
			     ?>
				<li class="reaction reaction-<?php echo $value['id'];?>" data-reaction="<?php echo $value['name'];?>" data-reaction-id="<?php echo $value['id'];?>" data-reaction-lang="<?php echo $value['name'];?>" data-post-id="<?php echo $wo['story']['id']; ?>" onclick="Wo_RegisterReaction(this,'<?php echo($value['wowonder_small_icon']) ?>',<?php echo($value['is_html']) ?>);">
					<?php if (preg_match("/<[^<]+>/",$value['wowonder_icon'],$m)) {
						  	echo($value['wowonder_icon']);
						 }
						 else{ ?>
				     	<img src="<?php echo($value['wowonder_icon']) ?>">
				    <?php } ?>
				</li>
			<?php } } } ?>



			<!-- <li class="reaction reaction-like" data-reaction="Like" data-reaction-lang="<?php echo $wo['lang']['like'];?>" data-post-id="<?php echo $wo['story']['id']; ?>" onclick="Wo_RegisterReaction(this);">
				<div class="emoji emoji--like">
					<div class="emoji__hand"><div class="emoji__thumb"></div></div>
				</div>
			</li>
			<li class="reaction reaction-love" data-reaction="Love" data-reaction-lang="<?php echo $wo['lang']['love'];?>" data-post-id="<?php echo $wo['story']['id']; ?>" onclick="Wo_RegisterReaction(this);">
				<div class="emoji emoji--love">
					<div class="emoji__heart"></div>
				</div>
			</li>
			<li class="reaction reaction-haha" data-reaction="HaHa" data-reaction-lang="<?php echo $wo['lang']['haha'];?>" data-post-id="<?php echo $wo['story']['id']; ?>" onclick="Wo_RegisterReaction(this);">
				<div class="emoji emoji--haha">
					<div class="emoji__face">
						<div class="emoji__eyes"></div>
						<div class="emoji__mouth">
							<div class="emoji__tongue"></div>
						</div>
					</div>
				</div>
			</li>
			<li class="reaction reaction-wow" data-reaction="Wow" data-reaction-lang="<?php echo $wo['lang']['wow'];?>" data-post-id="<?php echo $wo['story']['id']; ?>" onclick="Wo_RegisterReaction(this);">
				<div class="emoji emoji--wow">
					<div class="emoji__face">
						<div class="emoji__eyebrows"></div>
						<div class="emoji__eyes"></div>
						<div class="emoji__mouth"></div>
					</div>
				</div>
			</li>
			<li class="reaction reaction-sad" data-reaction="Sad" data-reaction-lang="<?php echo $wo['lang']['sad'];?>" data-post-id="<?php echo $wo['story']['id']; ?>" onclick="Wo_RegisterReaction(this);">
				<div class="emoji emoji--sad">
					<div class="emoji__face">
						<div class="emoji__eyebrows"></div>
						<div class="emoji__eyes"></div>
						<div class="emoji__mouth"></div>
					</div>
				</div>
			</li>
			<li class="reaction reaction-angry" data-reaction="Angry" data-reaction-lang="<?php echo $wo['lang']['angry'];?>" data-post-id="<?php echo $wo['story']['id']; ?>" onclick="Wo_RegisterReaction(this);">
				<div class="emoji emoji--angry">
					<div class="emoji__face">
						<div class="emoji__eyebrows"></div>
						<div class="emoji__eyes"></div>
						<div class="emoji__mouth"></div>
					</div>
				</div>
			</li> -->
		</ul>
	</div>
	
	<?php } else { ?>

	<div class="wo-reaction wo-reaction-post stat-item unselectable" data-id="<?php echo $wo['story']['id']; ?>">
		<span class="like-btn like-btn-post unselectable"  data-id="<?php echo $wo['story']['id']; ?>" id="react_<?php echo $wo['story']['id']; ?>" <?php if ($wo['loggedin'] && Wo_IsReacted($wo['story']['id'], $wo['user']['user_id'])) { ?> data_react="1" <?php }else{ ?> data_react="0"<?php } ?> data-reaction-id="<?php echo $wo['reactions_types'][1]['id'];?>"  data-reaction="Like" data-reaction-lang="<?php echo $wo['lang']['like'];?>" data-post-id="<?php echo $wo['story']['id']; ?>" onclick="Wo_RegisterReactionLike(this,'<?php echo($wo['reactions_types'][1]['wowonder_small_icon']) ?>',<?php echo($wo['reactions_types'][1]['is_html']) ?>);">
			<?php
				if ($wo['loggedin'] && Wo_IsReacted($wo['story']['id'], $wo['user']['user_id']) === true) {    
					echo Wo_GetReactedTextIcon($wo['story']['id'], $wo['user']['user_id']);
				} else {   
					echo '<span class="status-reaction-'.$wo['story']['id'].' unselectable"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-thumbs-up"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path></svg> <span class="t_likes'.$wo['story']['id'].'"></span> ' . $wo['lang']['like'] . '</span>';   
				}    
			?>
		</span>
		<ul class="reactions-box reactions-box-container-<?php echo $wo['story']['id']; ?>" data-id="<?php echo $wo['story']['id']; ?>" style="<?php if ($wo['language_type'] == 'rtl') {?> left: auto; <?php }else{ ?> right: auto; <?php }?>">
			<?php if (!empty($wo['reactions_types'])) {
			    foreach ($wo['reactions_types'] as $key => $value) {
			    	if ($value['status'] == 1) {
			    		
			     ?>
				<li class="reaction reaction-<?php echo $value['id'];?>" data-reaction="<?php echo $value['name'];?>" data-reaction-id="<?php echo $value['id'];?>" data-reaction-lang="<?php echo $value['name'];?>" data-post-id="<?php echo $wo['story']['id']; ?>" onclick="Wo_RegisterReaction(this,'<?php echo($value['wowonder_small_icon']) ?>',<?php echo($value['is_html']) ?>);">
					<?php if (preg_match("/<[^<]+>/",$value['wowonder_icon'],$m)) {
						  	echo($value['wowonder_icon']);
						 }
						 else{ ?>
				     	<img src="<?php echo($value['wowonder_icon']) ?>">
				    <?php } ?>
				</li>
			<?php } } } ?>



			<!-- <li class="reaction reaction-like animated_2" data-reaction="Like" data-reaction-lang="<?php echo $wo['lang']['like'];?>" data-post-id="<?php echo $wo['story']['id']; ?>" onclick="Wo_RegisterReaction(this);">
				<div class="emoji emoji--like">
					<div class="emoji__hand"><div class="emoji__thumb"></div></div>
				</div>
			</li>
			<li class="reaction reaction-love animated_4" data-reaction="Love" data-reaction-lang="<?php echo $wo['lang']['love'];?>" data-post-id="<?php echo $wo['story']['id']; ?>" onclick="Wo_RegisterReaction(this);">
				<div class="emoji emoji--love">
					<div class="emoji__heart"></div>
				</div>
			</li>
			<li class="reaction reaction-haha animated_6" data-reaction="HaHa" data-reaction-lang="<?php echo $wo['lang']['haha'];?>" data-post-id="<?php echo $wo['story']['id']; ?>" onclick="Wo_RegisterReaction(this);">
				<div class="emoji emoji--haha">
					<div class="emoji__face">
						<div class="emoji__eyes"></div>
						<div class="emoji__mouth">
							<div class="emoji__tongue"></div>
						</div>
					</div>
				</div>
			</li>
			<li class="reaction reaction-wow animated_8" data-reaction="Wow" data-reaction-lang="<?php echo $wo['lang']['wow'];?>" data-post-id="<?php echo $wo['story']['id']; ?>" onclick="Wo_RegisterReaction(this);">
				<div class="emoji emoji--wow">
					<div class="emoji__face">
						<div class="emoji__eyebrows"></div>
						<div class="emoji__eyes"></div>
						<div class="emoji__mouth"></div>
					</div>
				</div>
			</li>
			<li class="reaction reaction-sad animated_10" data-reaction="Sad" data-reaction-lang="<?php echo $wo['lang']['sad'];?>" data-post-id="<?php echo $wo['story']['id']; ?>" onclick="Wo_RegisterReaction(this);">
				<div class="emoji emoji--sad">
					<div class="emoji__face">
						<div class="emoji__eyebrows"></div>
						<div class="emoji__eyes"></div>
						<div class="emoji__mouth"></div>
					</div>
				</div>
			</li>
			<li class="reaction reaction-angry animated_12" data-reaction="Angry" data-reaction-lang="<?php echo $wo['lang']['angry'];?>" data-post-id="<?php echo $wo['story']['id']; ?>" onclick="Wo_RegisterReaction(this);">
				<div class="emoji emoji--angry">
					<div class="emoji__face">
						<div class="emoji__eyebrows"></div>
						<div class="emoji__eyes"></div>
						<div class="emoji__mouth"></div>
					</div>
				</div>
			</li> -->
		</ul>
	</div>
	<?php } ?>

<?php }else{ ?>

  <!-- Normal Like -->
  <span onclick="Wo_RegisterLike(<?php echo $wo['story']['id']; ?>);" id="like-button" class="btn btn-default stat-item" title="<?php echo $wo['lang']['like'];?>">
  <?php
  $second_btn_wonder = ($wo['config']['second_post_button'] == 'dislike') ? $wo['lang']['dislike'] : $wo['lang']['wonder'];
  $second_btn_wondered = ($wo['config']['second_post_button'] == 'dislike') ? $wo['lang']['disliked'] : $wo['lang']['wondered'];
  if ($wo['story']['is_liked'] === true) {    
    echo '<span class="active-like"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-thumbs-up"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path></svg> ' . $wo['lang']['liked'] . '</span>';   
  } else {   
    echo '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-thumbs-up"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path></svg> ' . $wo['lang']['like'];   
  }    
  ?>
  </span>
  <?php if ($wo['config']['second_post_button'] != 'disabled') { ?>
  <span onclick="Wo_RegisterWonder(<?php echo $wo['story']['id']; ?>);" id="wonder-button" class="btn btn-default stat-item" title="<?php echo $wo['second_post_button_text'];?>">
  <?php 
  if ($wo['story']['is_wondered'] === true) {  
    echo '<span class="active-wonder">' . $wo['second_post_button_icon'] . '<span class="like-btn-mobile">' . $second_btn_wondered . '</span></span>'; 
  } else {    
    echo '' . $wo['second_post_button_icon'] . ' <span class="like-btn-mobile">' . $second_btn_wonder . '</span>';
  }
  ?>          
  </span>
  <?php } ?>

<?php } ?>

这是一种按钮类型：Like Button ...并且在文本附近是一个图标..我想更改该图标但我不能，因为我找不到图标的 SVG 文件... 它就像一个Like Button...在文本之后出现一个小图标：Like ..

谢谢

【问题讨论】：

    标签： php html image svg


    【解决方案1】：

    如果您只想手动转换几个图标，最简单的方法是获取 svg 代码（&lt;svg 和 &lt;/svg&gt; 之间的所有内容都将其复制到文本编辑器中，将文件另存为 .svg 和使用在线 svg-to-png 转换器将其转换。

    在您的情况下，您的代码中出现四次的 svg 是：

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-thumbs-up"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path></svg>

    【讨论】：

    • 我不需要那个图标..我需要更改图标，我不知道怎么做。
    • 我想换成其他图标
    • @OonicaRazvan 您的问题非常难以理解。在这种情况下，您可以按上述方式删除 svg，然后通过 &lt;img src="path/to/image.png"&gt; 将它们替换为图像
    猜你喜欢
    • 2015-06-14
    • 2020-08-02
    • 2019-07-14
    • 1970-01-01
    • 2016-11-26
    • 2020-05-04
    • 2017-12-18
    • 2022-10-17
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode