重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这期内容当中小编将会给大家带来有关 svg-sprite-loader如何在VUE-cli3中使用,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
创新互联是专业的临西网站建设公司,临西接单;提供成都网站制作、网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行临西网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
svg-sprite-loader 的插件,用来根据导入的 svg 文件自动生成 symbol 标签并插入 html,接下来就可以在模版中方便地使用 svg-sprite 技术了。
使用 svg-sprite 的好处
页面代码清爽
可使用 ID 随处重复调用
每个 SVG 图标都可以更改大小颜色
安装插件
npm install svg-sprite-loader --save-dev
webpack 配置,在Vue.config.js加入处理 svg 的 loader:
const path = require('path') function resolve(dir) { return path.join(__dirname, '.', dir) } module.exports = { chainWebpack: config => { config.module.rules.delete("svg"); //重点:删除默认配置中处理svg, //const svgRule = config.module.rule('svg') //svgRule.uses.clear() config.module .rule('svg-sprite-loader') .test(/\.svg$/) .include .add(resolve('src/icons')) //处理svg目录 .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) }, configureWebpack: () => ({ // resolve: { // alias: require('./alias.config').webpack // } // module: { // rules: [{ // test: /\.svg$/, // use: [{ // loader: "svg-sprite-loader", // options: { // symbolId: 'icon-[name]' // } // }] // }] // } }) }
这时候发现还是不行啊, body 中并没有看到 symbol 标签。
就是说只有我们自己引入的 svg 文件需要经过 svg-sprite-loader,那么就将这些 svg 统一放到一个目录下,我这里放到了 src/icons
然后要在用到的地方引入需要的svg
import './src/icon/target.svg';
重新启动项目,终于在 html 中看到了 symbol 标签!
配置好了,就可以用了。使用方法很简单,相较于原来插入 svg 图标的方法(img src 或将 svg 整个写入 html),用 svg-sprite 更加简单且清爽:
嗯,就这样短短一行。 xlink:href 中传入 svg ID 就好了,由于在上面的配置文件中我们直接使用文件名作为 symbol 的 ID,所以这里传入的 ID 即为你想显示的图标的 svg 文件名,记得加上 # 。
自动导入
你会发现,这里要想插入某个图标,都得 import ,每用一个都要重复一遍这个流程,太麻烦,那么我们就让 src/icons/svg/下的 svg 文件都自动导入吧。
webpack 可以帮我们做到:
// requires and returns all modules that match const requireAll = requireContext => requireContext.keys().map(requireContext); // import all svg const req = require.context('./assets/svg', true, /\.svg$/); requireAll(req);
代码实例:
首先在main.ts中引入import './icons/index',
icons/index.js,将icons/svg中的所有svg导入并注册全局组件SvgIcon
//SvgIcon组件代码
接下来就可以使用组建了
上述就是小编为大家分享的 svg-sprite-loader如何在VUE-cli3中使用了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。