iconfont svg 怎么引入

Posted 2023-03-14

iconfont svg是没有办法直接引入的。

PS：可以通过<use x="0" y="0" xlink:href="#icon-xxx"/>的方式，从缓存里曲线引用svg>defs>symbol中的SVG图标。

<use x="0" y="0" xlink:href="#icon-xxx"/>引用举例：

<svg style="display: none;">
   <defs>
       <symbol id="icon-XXX">
           <svg width="24" height="24" viewBox="0 0 48 48">
               <path d="XXXXXXXX"></path>
           </svg>
       </symbol>
   </defs></svg><svg>
   <use xlink:href="#icon-XXX"></use></svg>

iconfont的优缺点：

大小可以自由地变化。

颜色可以自由地修改。

添加阴影效果。

*IE6也可以支持。

支持一些CSS3对文字的效果。

字体文件比图片文件小很多。

由于是字体，所以只可以显示纯色图片，不支持多种颜色的图片（缺点）。

参考技术A 使用font-face声明字体。font-family是自定的字体名称，url是字体文件的存放路径，format是字体文件格式。
@font-face
font-family: 'iconfont'; /*自定的字体名称*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome、firefox */
url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, android, ios 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
本回答被提问者和网友采纳