用SVG 制作 Sprites的图标系统（一）

2022-05-08 257

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 我一直是图标字体的大力支持者。很多网站真的需要一个图标系统，图标字体提供了一个该死的精细系统。但是，我认为假设你对 IE 9+ 很好，使用内联 SVG 并且 <use> 引用图标的元素是一个优秀的系统。

我一直是图标字体的大力支持者。很多网站真的需要一个图标系统，图标字体提供了一个该死的精细系统。但是，我认为假设你对 IE 9+ 很好，使用内联 SVG 并且 <use> 引用图标的元素是一个优秀的系统。

首先让我们介绍它的工作原理。

处理图标的一个好方法是让文件夹中包含大量.svg文件。

C~(BKSVIQH6G([`@G@]TE]J.png

这是使用SVG的一个很酷的事情 - 它们是源文件。

它们可以是彩色的，而不是彩色的，多种形状，尺寸等等。

K4LJID2N_5_HD5FU(KU[_0B.png

你可以让 Illustrator（或其他任何软件）保存它，享受其带来的所有瑕疵：
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g>
    <path d="M50.049,0.3c14.18,0.332,25.969,5.307,35.366,14.923S99.675,36.9,100,51.409c-0.195,11.445-3.415,21.494-9.658,30.146 - yadda yadda yadda"/>
</g>
</svg>

合并`.svg`文件

如果需要，可以手动执行此操作。我做到了您甚至不必查看最终文件。只是称之为 svg-defs.svg或其他。

它应该只是一个 <svg> 标签，带有<defs>标签（这意味着你要定义以后要使用的东西），然后是一堆<g>（组）标签。每个<g>标记都有一个唯一的ID，包含每个图标的所有路径和诸如此类的东西。

<svg>
  <defs>
    <g id="shape-icon-1">
      <!-- all the paths and shapes and whatnot for this icon -->
    <g>
    <g id="shape-icon-2">
      <!-- all the paths and shapes and whatnot for this icon -->
    <g>
    <!-- etc -->
  </defs>
</svg>
事实证明<symbol>可能是一个更好的选择<g>。参考关于它的内容！

可以手工完成，但当然这有点费力。Fabrice Weinberg创建了一个名为grunt-svgstore的Grunt插件，可自动执行此操作。

如果从未使用过Grunt，那么您可以这样做。这是一个可以帮助入门的截屏视频。

你可以安装它：

npm install grunt-svgstore --save-dev

确保该任务可用于：

grunt.loadNpmTasks('grunt-svgstore');

然后在配置中：

svgstore: {
  options: {
    prefix : 'shape-', // This will prefix each <g> ID
  },
  default : {
      files: {
        'dest/svg-defs.svg': ['svgs/*.svg'],
      }
    }
  }
},

在输出文件中svg-defs.svg，每个图标（来自源.svg文件的任何路径和内容）将被包装在<g>带有唯一的前缀ID和文件名（减去.svg）的标记中。喜欢：

<g id="shape-codepen">

将SVG注入文档顶部

字面上包括它，如：

<!DOCTYPE html>
<html lang="en">
<head>
  ...
</head>
<body>
  <?php include_once("processed/svg-defs.svg"); ?>

或者你想要那样做。

遗憾的是，它必须位于顶部，因为有一个Chrome错误，如果稍后定义，这将无法正常工作。虽然......这个故事还有更多内容，因为当我输入这些单词时，这个网站使用的主题是在文档底部定义的图标，并且它有效。Ughkgh很困惑。

随时随地使用图标

现在你可以在任何地方使用它们！喜欢：

<svg viewBox="0 0 100 100" class="icon shape-codepen">
  <use xlink:href="#shape-codepen"></use>
</svg>
请注意，grunt-svgstore现在正在使用，<symbol>因此您甚至不需要使用viewBox！确保在svg上使用这些类名来调整它的大小。
/* Do whatever makes sense here.
   Just know that the svg will be an 
   enormous 100% wide if you don't 
   reign in the width. */
.icon {
  display: inline-block;
  width: 25px;
  height: 25px;
}

Yay：你可以用CSS设置它们（和它们的部分）的样式

我们喜欢图标字体的原因之一是能够使用CSS设置样式。这项技术可以让我们尽我们所能，而且更多，因为：

我们可以设计所有单独的部分
SVG有更多你可以控制的东西，比如特殊的过滤器和笔画

svg（有点像是）在DOM中，所以也可以用JavaScript。这里有一些造型可能性的各种演示：

codepen.io点击预览
<svg viewBox="0 0 100 100" class="icon shape-codepen">
  <use xlink:href="#shape-codepen"></use>
</svg>
<svg viewBox="0 0 100 100" class="icon shape-codepen-2">
  <use xlink:href="#shape-codepen"></use>
</svg>
<br>
<svg viewBox="0 0 100 100" class="icon shape-youtube">
  <linearGradient id="gradient"  gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">
<stop stop-color="#FF0000" offset="0"/><stop stop-color="#571C1C" offset="1"/>
</linearGradient>
  <use xlink:href="#shape-youtube"></use>
</svg>
<br>
<svg viewBox="0 0 100 100" class="icon shape-twitter">
  <use xlink:href="#shape-twitter"></use>
</svg>
<svg viewBox="0 0 100 100" class="icon shape-twitter-2">
  <use xlink:href="#shape-twitter"></use>
</svg>
<svg viewBox="0 0 100 100" class="icon shape-twitter-3">
  <use xlink:href="#shape-twitter"></use>
</svg>
Result
EDIT ON
.hide {
  display: none;
}
.icon {
  width: 75px;
  height: 75px;
}
body {
  padding: 20px;
}
/* Targeting inside only */
.outer-ring {
  fill: #999;
}
.inner-logo {
  fill: #666;
}
.shape-codepen-2 {
  -webkit-filter: drop-shadow(5px 5px 2px #ccc); 
  filter: drop-shadow(5px 5px 2px black);
}
.shape-youtube {
  fill: url(#gradient);
}
.shape-twitter-2 {
  fill: #55ACEE
}
.shape-twitter-3 {
  fill: red;
}

请参阅CodeCen上的Chris Coyier（@chriscoyier）的Pen EBHlD。

另一种方式：IcoMoon

IcoMoon以生成图标字体而闻名，实际上也可以很好地生成SVG精灵。选择所需的所有字体后，单击底部的SVG按钮，您将获得该输出，包括带有内联SVG方法的演示页面。

U%)9Y_V6(O1DC0B]0@SEO3S.png

用SVG 制作 Sprites的图标系统（一）

合并`.svg`文件

随时随地使用图标

Yay：你可以用CSS设置它们（和它们的部分）的样式

另一种方式：IcoMoon

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

用SVG 制作 Sprites的图标系统（一）

合并.svg文件

随时随地使用图标

Yay：你可以用CSS设置它们（和它们的部分）的样式

另一种方式：IcoMoon

热门文章

最新文章

相关电子书

合并`.svg`文件