沈阳网站建设搜q479185700,北京王府井美食,西安网页设计培训,住宅与建设部网站SVG图标#xff0c;SVG symbols 项目中图标的使用#xff0c;趋势是使用svg作图标的#xff0c;优点如下 兼容现有图片能力前提还支持矢量 可读性好#xff0c;有利于SEO与无障碍 在性能和维护性方面也比iconfont要强很多 怎么在项目中优雅的使用svg图标#xff0c;下面…SVG图标SVG symbols 项目中图标的使用趋势是使用svg作图标的优点如下 兼容现有图片能力前提还支持矢量 可读性好有利于SEO与无障碍 在性能和维护性方面也比iconfont要强很多 怎么在项目中优雅的使用svg图标下面我们将采用类似雪碧图的做法 1、普通的使用
普通的使用遇到以下的问题
下载的 svg 可能有自带的 fill 属性添加 color 样式不生效。封装 Icon 组件时每用到一个 svg 图标都需要引入一下比较繁琐。
import apple from ../assets/icons/apple.svg // 得到一个计算之后的路径const Icon (props) {return (img src{apple} /);
};export default Icon;2、全局配置svg-sprite-loader
svg-sprite-loader官网 官方解释是一个用于创建 svg 雪碧图的 Webpack 加载器。通俗的讲svg-sprite-loader 会把你引入的 svg 塞到一个个 symbol 中合成一个大的 svg最后将这个大的 svg 放入 body 中。
symbol 的 id 如果不特别指定就是你的文件名。在页面上形成这样的元素然后我们使用use标签使用类名的形式引入。 打开webpack配置 先看自己项目目录有没有config这个文件如果没有就需要调出这个文件运行这个命令 yarn eject 注意如果项目没有提交要先提交再运行这个命令运行完就出现config文件打开可以看到有一个webpack.config.js文件反正就是暴露webpack的配置文件方便我们去配置对应的loader 安装并配置 yarn add --dev svg-sprite-loader yarn add --dev svgo-loader 安装这两个依赖然后将下面代码放进configwebpack.config.js文件里面的modulerulesoneOf里面 {test: /\.svg$/,use: [{ loader: svg-sprite-loader, options: {} },{ loader: svgo-loader, options: {} },]
}3、 使用svg组件化Icon
完成上述配置之后我们就可以通过指定 id 的方式使用 use 的方式使用 svg 了。但是不能使用import方式引入
不适用import的原因import 的方式引入了 svg 在页面上是找不到 icon 的。这是因为 import 引入的 apple 实际上是一个对象通过 svg use 指定的 #id 的方式最终被 webpack 理解为 apple 对象没被用到所以就 Tree Shaking 掉它因此我们需要用 require 的方式引入原因CommonJS 模块的这种动态加载的性质意味着无法应用 Tree Shaking因为在实际运行代码之前无法确定需要哪些模块。
// 下面这种方式有坑最终会被 Tree Shaking
// import apple from ../assets/icons/apple.svg // 得到一个计算之后的路径
require(../assets/icons/apple.svg)const Icon (props) {return (svg fillreduse xlink:href#apple//svg);
};export default Icon;而且经过 svg-sprite-loader 加载之后不仅可以通过指定 id 的方式引入 icon而且相比图片引入的方式最大的优点就在于可以通过给 svg 标签添加 fill 属性来调整 icon 的颜色。
4、批量引入所有的 svg静态文件
项目中我们用到 svg 的地方都需要手动引入一下然后使用当 svg 多起来的时候一遍遍的引入就显得不太聪明。能不能像 Element UI 那样直接指定一个 name 就能使用特定的 svg 那就需要在 Icon 组件中将所有的 svg 做批量的引入
// require(../assets/icons/apple.svg)
// require(../assets/icons/banana.svg)
// require(../assets/icons/orange.svg) // 这样就仿佛一个不太聪明的机器人//直接引入 src/assets/icons 目录下的所有 svg
const importAll (requireContext: __WebpackModuleApi.RequireContext) {requireContext.keys().forEach(requireContext);
}
try {importAll(require.context(../assets/icons, true, /\.svg$/));
} catch (error) {console.log(error);
}const Icon (props) {return (svguse xlinkHref{# props.name}/use/svg);
};export default Icon;ps直接从网上拷贝上述代码会报错需要 yarn add types/webpack-env -D 一下。
5、svgo-loaderg改变 Icon组件的颜色
svg-sprite-loader可以帮助我们通过 svg use 指定 id 的方式引入 svg虽然可以通过给 svg 添加内联 fill 属性的方式修改 icon 的颜色但是并不建议这样做而是通过 class 样式的方式指定 icon 的颜色这就需要用到 svgo-loader 先把 svg 自带的 fill 属性给清除掉为我们后续指定 icon 的颜色扫清障碍。 [svgo-loader](https://github.com/svg/svgo svgo-loader) 是基于 SVG Optimizer 的一个加载器而 SVG Optimizer 是一个基于node.js 的工具用于优化 SVG 矢量图形文件它可以删除和修改SVG元素折叠内容移动属性等。// 配置 webpack.config.js
// 配置之前需要安装该 loader
// npm install --dev svgo-loader
// yarn add --dev svgo-loader{ loader: svg-sprite-loader, options: {} },
{ loader: svgo-loader, options: {plugins: [{name: removeAttrs, // 必须指定nameparams: {attrs: fill}}]}
}通过上述配置引入项目中的 svg 文件会先经过 svgo-loader 清楚 fill 属性然后再通过 svg-sprite-loader 将你引入的 svg 塞到一个个 symbol 中合成一个大的 svg最后将这个大的 svg 放入 body 中。
