SVG图标：icon-home【代码】

技术频道 - html技术

作者:admin 时间:2022-11-28 17:41:31 浏览:

本文介绍一个在网页设计中比较常用的首页图标(icon-home)，一些人可能会选择用字体图标如FontAwesome来实现，不过本文介绍的是用SVG来实现的方法，好处是，不用附带加载一大堆字体文件，也不用配置Web服务器添加某些映射脚本。

有两种写法，一种是把SVG代码写在HTML代码里，另一种写法是把SVG代码写到一个独立的文件里，然后在HTML代码里引用该文件。

方法一：不用独立SVG文件

HTML(SVG)

<svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol id="icon-home" viewBox="0 0 1024 1024">
      <title>home</title>
      <path class="path1" d="M512 96l-512 512 96 96 96-96v416h256v-192h128v192h256v-416l96 96 96-96-512-512zM512 512c-35.346 0-64-28.654-64-64s28.654-64 64-64c35.346 0 64 28.654 64 64s-28.654 64-64 64z"></path>
    </symbol>
  </defs>
</svg>

<svg class="icon icon-home"><use xlink:href="#icon-home"></use></svg><span> icon-home</span>

CSS

body {
  font: 32px sans-serif; color: #444;
  margin: 1em;
}
.icon {
  display: inline-block;
  color: #444444;
  width: 1em;
  height: 1em;
  fill: currentColor;
}
.icon-home {
  color: red;
  font-size: 48px;
}

代码解释

可以通过CSS的代码设置图标(icon)的大小，width: 1em; 和 height: 1em;，也可设置图标的颜色，color: #444444;。

完整HTML

<html>
<head>
<title>SVG Icons</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
body {
  font: 32px sans-serif; color: #444;
  margin: 1em;
}
.icon {
  display: inline-block;
  color: #444444;
  width: 1em;
  height: 1em;
  fill: currentColor;
}
.icon-home {
  color: red;
  font-size: 48px;
}
</style>
</head>

<body>
<svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol id="icon-home" viewBox="0 0 1024 1024">
  <title>home</title>
  <path class="path1" d="M512 96l-512 512 96 96 96-96v416h256v-192h128v192h256v-416l96 96 96-96-512-512zM512 512c-35.346 0-64-28.654-64-64s28.654-64 64-64c35.346 0 64 28.654 64 64s-28.654 64-64 64z"></path>
    </symbol>
  </defs>
</svg>

<svg class="icon icon-home"><use xlink:href="#icon-home"></use></svg><span> icon-home</span>
  
</body>
</html>

demo download

方法二：使用独立SVG文件

我们可以把SVG代码独立成一个文件，然后在HTML代码里引用。

svg文件

首先，创建一个SVG独立文件，symbol-defs.svg，代码如下：

<svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol id="icon-home" viewBox="0 0 1024 1024">
      <title>home</title>
      <path class="path1" d="M512 96l-512 512 96 96 96-96v416h256v-192h128v192h256v-416l96 96 96-96-512-512zM512 512c-35.346 0-64-28.654-64-64s28.654-64 64-64c35.346 0 64 28.654 64 64s-28.654 64-64 64z"></path>
    </symbol>
  </defs>
</svg>

HTML代码

<html>
<head>
<title>SVG Icons</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
  body {
  font: 32px sans-serif; color: #444;
  margin: 1em;
}
.icon {
  display: inline-block;
  color: #444444;
  width: 1em;
  height: 1em;
  fill: currentColor;
}
.icon-home {
  color: red;
  font-size: 48px;
}
</style>
</head>

<body>

<svg class="icon icon-home"><use xlink:href="symbol-defs.svg#icon-home"></use></svg><span> icon-home</span>
  
</body>
</html>