rollup: svg can not be packaged via style url import

This is my scss code:

&.docs::before {
      background: url('../../assets/lark-word.svg');
      background-size: 14px;
      background-repeat: no-repeat;
      content: ' ';
      width: 14px;
      height: 14px;
      display: inline-block;
      margin-right: 2px;
      vertical-align: top;
    }

and this is my rollup.config

const urlPlugin = url({
  include: ["**/*.svg", "**/*.ttf"]
})

const esConfig = {
    ...baseConfig,
    input: 'src/entry.esm.js',
    external,
    output: {
      file: 'dist/ea-comment.esm.js',
      format: 'esm',
      exports: 'named',
    },
    plugins: [
      replace(baseConfig.plugins.replace),
      ...baseConfig.plugins.preVue,
      vue(baseConfig.plugins.vue),
      ...baseConfig.plugins.postVue,
      sass(),
      svg(),
      urlPlugin,
      requireContext(),
      babel({
        ...baseConfig.plugins.babel,
        presets: [
          [
            '@babel/preset-env',
            {
              targets: esbrowserslist,
            },
          ],
        ],
      }),
      commonjs(),
    ],

I couldn't find out the svg source in the output file after built. So that the background image couldn't show up.

Any suggestion? Thanks a lot.