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

2022-05-08 227

版权

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

简介： 我一直是图标字体的大力支持者。很多网站真的需要一个图标系统，图标字体提供了一个该死的精细系统。但是，我认为假设你对 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;
}