Vue2中如何将vue-feather-icons-ssr组件设为background-image？

嘿，这个问题我之前也碰到过！直接把Vue组件标签塞到background-image里肯定行不通，因为CSS的url()接受的是资源路径或者data URI，没法解析Vue组件。咱们得换个思路，把Feather图标对应的SVG转成可以直接用的data URI，这样就能作为背景图了。

1. 获取目标图标的SVG源码 #

首先，你需要拿到feather图标的原始SVG代码。因为vue-feather-icons-ssr是基于Feather Icons封装的，你可以直接从Feather Icons的资源里找到对应的SVG，比如feather图标代码是：

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z"></path><line x1="16" y1="8" x2="2" y2="22"></line><line x1="17.5" y1="15" x2="9" y2="15"></line></svg>

2. 将SVG转为data URI #

把上面的SVG字符串转成CSS能识别的data URI，需要做一下编码处理。你可以用encodeURIComponent来转义特殊字符，或者手动替换双引号为单引号（如果你的SVG里没有单引号的话）。

比如在Vue组件的computed里处理：

computed: {
  featherBgUrl() {
    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z"></path><line x1="16" y1="8" x2="2" y2="22"></line><line x1="17.5" y1="15" x2="9" y2="15"></line></svg>`;
    // 编码SVG字符串
    const encodedSvg = encodeURIComponent(svg);
    // 返回data URI格式
    return `url('data:image/svg+xml;utf8,${encodedSvg}')`;
  }
}

3. 在模板中绑定样式 #

然后直接把这个computed属性绑定到元素的style上，再加上一些背景相关的样式确保显示正常：

<div :style="{ 
  backgroundImage: featherBgUrl, 
  backgroundSize: '24px 24px', 
  backgroundRepeat: 'no-repeat', 
  backgroundPosition: 'left center',
  paddingLeft: '30px'
}">test</div>

进阶：封装成通用方法（支持多个图标） #

如果需要用到多个Feather图标，可以封装一个方法来动态生成data URI。先把常用图标的SVG存在一个对象里，再写一个方法返回对应的背景URL：

data() {
  return {
    featherIcons: {
      feather: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z"></path><line x1="16" y1="8" x2="2" y2="22"></line><line x1="17.5" y1="15" x2="9" y2="15"></line></svg>`,
      arrowRight: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>`
      // 可以继续添加更多图标
    }
  };
},
methods: {
  getFeatherBgUrl(iconName) {
    const svg = this.featherIcons[iconName];
    if (!svg) return '';
    const encodedSvg = encodeURIComponent(svg);
    return `url('data:image/svg+xml;utf8,${encodedSvg}')`;
  }
}

然后模板里就能灵活调用了：

<div :style="{ backgroundImage: getFeatherBgUrl('feather'), backgroundSize: '24px 24px' }">test</div>
<div :style="{ backgroundImage: getFeatherBgUrl('arrowRight'), backgroundSize: '20px 20px' }">another test</div>

为什么直接用组件标签不行？ #

你之前的伪代码<div :style="{background-image: url(<icon name="feather"></icon>)}">test</div>没法工作，核心原因有两个：

• CSS的url()函数只识别字符串格式的路径或data URI，完全不具备解析Vue组件的能力；
• Vue组件标签需要经过Vue的编译渲染才能变成DOM元素（这里是SVG），没法直接作为CSS属性值使用。

内容的提问来源于stack exchange，提问作者nexequ